Components : Event Timeline Component

Preview content adapted to proportion

Event Timeline Component

Timeline

The component is used to present a series of events or milestones in a structured and engaging manner. It's ideal for websites, apps, or landing pages that need to showcase a chronological sequence of activities.

This component displays a timeline of events with interactive elements and responsive design. It features a visual timeline with icons, event cards, and navigation buttons.

Users can interact with the timeline by clicking on event cards, which may trigger additional details or actions. The navigation buttons allow users to move through the timeline forwards or backwards.


The design is fully responsive, adapting to different screen sizes. On smaller screens, the timeline grid adjusts to a single column, and decorative elements like separators are hidden. On larger screens, the timeline expands to a multi-column layout with centered separators.

Date : June 20, 2025
Views : 7
Copys : 0

fa-tags

Event scheduling platforms Project management dashboards Corporate websites Educational institutions

Code

<div class="group relative min-h-screen bg-gradient-to-br from-gray-800 to-gray-900 p-6">
 <div class="mx-auto max-w-6xl">
  <div class="grid gap-6 md:grid-cols-3">
   <div class="relative col-span-1 space-y-8 md:block">
    <div class="absolute left-6 top-0 h-full w-0.5 bg-gray-700 md:left-1/2">
    </div>
    <div class="relative flex items-center gap-4 md:justify-center">
     <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-600 text-white transition-all duration-300 hover:scale-110">
      📅
     </div>
     <div class="hidden h-0.5 w-8 bg-gray-600 md:block">
     </div>
    </div>
    <div class="relative flex items-center gap-4 md:justify-center">
     <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gray-200 text-gray-900 transition-all duration-300 hover:scale-110">
      ⏰
     </div>
     <div class="hidden h-0.5 w-8 bg-gray-600 md:block">
     </div>
    </div>
   </div>
   <div class="col-span-2 grid gap-4 md:grid-cols-2">
    <div class="transform cursor-pointer space-y-4 rounded-lg bg-gray-100 p-6 transition-all duration-300 hover:scale-105 hover:shadow-xl">
     <div class="flex items-center gap-3">
      <div class="h-8 w-8 animate-pulse rounded-full bg-gray-300">
      </div>
      <div class="h-4 w-32 animate-pulse rounded bg-gray-300">
      </div>
     </div>
     <div class="space-y-2">
      <div class="h-4 w-full animate-pulse rounded bg-gray-300">
      </div>
      <div class="h-4 w-3/4 animate-pulse rounded bg-gray-300">
      </div>
     </div>
    </div>
    <div class="transform cursor-pointer space-y-4 rounded-lg bg-gray-100 p-6 transition-all duration-300 hover:scale-105 hover:shadow-xl">
     <div class="flex items-center justify-between">
      <span class="rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800">
       New
      </span>
      <span class="text-sm text-gray-500">
       📍 Location
      </span>
     </div>
     <h3 class="text-lg font-semibold text-gray-900">
      Event Title
     </h3>
     <p class="text-gray-600">
      Event description with important details and context about the timeline item.
     </p>
     <div class="flex items-center gap-2 text-sm text-gray-500">
      <span>
       ⏰ 2:00 PM
      </span>
      <span>
       👤 Speaker
      </span>
     </div>
    </div>
   </div>
  </div>
  <div class="mt-8 flex justify-center gap-4">
   <button class="rounded-lg bg-gray-200 px-4 py-2 text-gray-900 transition-all duration-300 hover:bg-gray-300">
    ← Previous
   </button>
   <button class="rounded-lg bg-blue-600 px-4 py-2 text-white transition-all duration-300 hover:bg-blue-700">
    Next →
   </button>
  </div>
 </div>
</div>


<template>
 <div class="group relative min-h-screen bg-gradient-to-br from-gray-800 to-gray-900 p-6">
  <div class="mx-auto max-w-6xl">
   <div class="grid gap-6 md:grid-cols-3">
    <div class="relative col-span-1 space-y-8 md:block">
     <div class="absolute left-6 top-0 h-full w-0.5 bg-gray-700 md:left-1/2">
     </div>
     <div class="relative flex items-center gap-4 md:justify-center">
      <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-600 text-white transition-all duration-300 hover:scale-110">
       📅
      </div>
      <div class="hidden h-0.5 w-8 bg-gray-600 md:block">
      </div>
     </div>
     <div class="relative flex items-center gap-4 md:justify-center">
      <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gray-200 text-gray-900 transition-all duration-300 hover:scale-110">
       ⏰
      </div>
      <div class="hidden h-0.5 w-8 bg-gray-600 md:block">
      </div>
     </div>
    </div>
    <div class="col-span-2 grid gap-4 md:grid-cols-2">
     <div class="transform cursor-pointer space-y-4 rounded-lg bg-gray-100 p-6 transition-all duration-300 hover:scale-105 hover:shadow-xl">
      <div class="flex items-center gap-3">
       <div class="h-8 w-8 animate-pulse rounded-full bg-gray-300">
       </div>
       <div class="h-4 w-32 animate-pulse rounded bg-gray-300">
       </div>
      </div>
      <div class="space-y-2">
       <div class="h-4 w-full animate-pulse rounded bg-gray-300">
       </div>
       <div class="h-4 w-3/4 animate-pulse rounded bg-gray-300">
       </div>
      </div>
     </div>
     <div class="transform cursor-pointer space-y-4 rounded-lg bg-gray-100 p-6 transition-all duration-300 hover:scale-105 hover:shadow-xl">
      <div class="flex items-center justify-between">
       <span class="rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800">
        New
       </span>
       <span class="text-sm text-gray-500">
        📍 Location
       </span>
      </div>
      <h3 class="text-lg font-semibold text-gray-900">
       Event Title
      </h3>
      <p class="text-gray-600">
       Event description with important details and context about the timeline item.
      </p>
      <div class="flex items-center gap-2 text-sm text-gray-500">
       <span>
        ⏰ 2:00 PM
       </span>
       <span>
        👤 Speaker
       </span>
      </div>
     </div>
    </div>
   </div>
   <div class="mt-8 flex justify-center gap-4">
    <button class="rounded-lg bg-gray-200 px-4 py-2 text-gray-900 transition-all duration-300 hover:bg-gray-300">
     ← Previous
    </button>
    <button class="rounded-lg bg-blue-600 px-4 py-2 text-white transition-all duration-300 hover:bg-blue-700">
     Next →
    </button>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyTimelineComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyTimelineComponent = () => {
    return (
<div>
<div class="group relative min-h-screen bg-gradient-to-br from-gray-800 to-gray-900 p-6">
 <div class="mx-auto max-w-6xl">
  <div class="grid gap-6 md:grid-cols-3">
   <div class="relative col-span-1 space-y-8 md:block">
    <div class="absolute left-6 top-0 h-full w-0.5 bg-gray-700 md:left-1/2">
    </div>
    <div class="relative flex items-center gap-4 md:justify-center">
     <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-600 text-white transition-all duration-300 hover:scale-110">
      📅
     </div>
     <div class="hidden h-0.5 w-8 bg-gray-600 md:block">
     </div>
    </div>
    <div class="relative flex items-center gap-4 md:justify-center">
     <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gray-200 text-gray-900 transition-all duration-300 hover:scale-110">
      ⏰
     </div>
     <div class="hidden h-0.5 w-8 bg-gray-600 md:block">
     </div>
    </div>
   </div>
   <div class="col-span-2 grid gap-4 md:grid-cols-2">
    <div class="transform cursor-pointer space-y-4 rounded-lg bg-gray-100 p-6 transition-all duration-300 hover:scale-105 hover:shadow-xl">
     <div class="flex items-center gap-3">
      <div class="h-8 w-8 animate-pulse rounded-full bg-gray-300">
      </div>
      <div class="h-4 w-32 animate-pulse rounded bg-gray-300">
      </div>
     </div>
     <div class="space-y-2">
      <div class="h-4 w-full animate-pulse rounded bg-gray-300">
      </div>
      <div class="h-4 w-3/4 animate-pulse rounded bg-gray-300">
      </div>
     </div>
    </div>
    <div class="transform cursor-pointer space-y-4 rounded-lg bg-gray-100 p-6 transition-all duration-300 hover:scale-105 hover:shadow-xl">
     <div class="flex items-center justify-between">
      <span class="rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800">
       New
      </span>
      <span class="text-sm text-gray-500">
       📍 Location
      </span>
     </div>
     <h3 class="text-lg font-semibold text-gray-900">
      Event Title
     </h3>
     <p class="text-gray-600">
      Event description with important details and context about the timeline item.
     </p>
     <div class="flex items-center gap-2 text-sm text-gray-500">
      <span>
       ⏰ 2:00 PM
      </span>
      <span>
       👤 Speaker
      </span>
     </div>
    </div>
   </div>
  </div>
  <div class="mt-8 flex justify-center gap-4">
   <button class="rounded-lg bg-gray-200 px-4 py-2 text-gray-900 transition-all duration-300 hover:bg-gray-300">
    ← Previous
   </button>
   <button class="rounded-lg bg-blue-600 px-4 py-2 text-white transition-all duration-300 hover:bg-blue-700">
    Next →
   </button>
  </div>
 </div>
</div>

</div>
    )
}
export default MyTimelineComponent;

Recommended Related Components

More+

Progress Tracking Group

Ideal for visualizing quarterly or monthly progress, achievements, or goals in a user-friendly manner.

56
0

Project Timeline Cards

Ideal for showcasing project milestones, updates, or achievements in a visually appealing manner.

32
0

Interactive Timeline Components

They are used to present a series of events or milestones in a visually appealing and interactive manner.

18
0

Event Timeline Component

The component is used to present a series of events or milestones in a structured and engaging manner. It's ideal for websites, apps, or landing pages that need to showcase a chronological sequence of activities.

7
0