Components : Interactive Timeline Components

Preview content adapted to proportion

Interactive Timeline Components

Timeline

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

These components display different styles of timeline entries, each with unique visual elements and hover effects to enhance user engagement.

Users can interact with each component by hovering over them, which triggers visual changes such as color shifts, shadow enhancements, and scale transformations. Clicking on certain elements may lead to further information or navigation.


The components are designed to be responsive, adapting to different screen sizes. On smaller screens, they stack vertically, while on larger screens, they arrange horizontally, ensuring optimal display across devices.

Date : June 15, 2025
Views : 18
Copys : 0

fa-tags

Corporate websites Portfolio showcases Event planning platforms

Code

<div class="relative flex flex-col lg:flex-row items-center justify-center min-h-screen p-8 space-y-8 lg:space-y-0 lg:space-x-8">
 <!-- Style 1: Minimal Business -->
 <div class="w-full lg:w-1/3 group">
  <div class="relative flex flex-col items-center">
   <div class="absolute h-full w-1 bg-gray-200 top-4 group-hover:bg-orange-200 transition-colors">
   </div>
   <div class="flex items-center space-x-4 mb-8">
    <div class="z-10 h-8 w-8 bg-orange-500 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform">
     📅
    </div>
    <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow cursor-pointer">
     <h3 class="text-gray-800 font-bold mb-2">
      2023
     </h3>
     <p class="text-gray-600">
      Strategic Business Expansion
     </p>
     <div class="absolute -right-4 top-1/2 w-4 h-4 bg-white transform -translate-y-1/2 rotate-45">
     </div>
    </div>
   </div>
  </div>
 </div>
 <!-- Style 2: Tech Dynamic -->
 <div class="w-full lg:w-1/3 group">
  <div class="relative flex flex-col md:flex-row lg:flex-col items-center">
   <div class="absolute inset-0 bg-gradient-to-r from-blue-300 via-purple-500 to-purple-700 opacity-20 group-hover:opacity-30 transition-opacity rounded-xl">
   </div>
   <div class="z-10 flex items-center space-y-4 md:space-y-0 md:space-x-4 lg:space-x-0 lg:space-y-4 p-6">
    <div class="h-12 w-12 bg-purple-600 rounded-full flex items-center justify-center text-white glow animate-pulse">
     🚀
    </div>
    <div class="bg-white/90 backdrop-blur-sm p-6 rounded-xl shadow-lg transform hover:-translate-y-2 transition-transform">
     <h3 class="text-purple-900 font-bold mb-2">
      2024
     </h3>
     <p class="text-purple-700">
      Tech Innovation Summit
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Style 3: Natural Eco -->
 <div class="w-full lg:w-1/3 group">
  <div class="relative flex flex-col items-center">
   <div class="absolute inset-0 bg-gradient-to-b from-green-100 to-brown-200 opacity-50 rounded-2xl">
   </div>
   <div class="z-10 flex items-center space-x-4 mt-8">
    <div class="bg-green-200 p-6 rounded-lg shadow-md transform hover:scale-105 transition-transform cursor-pointer">
     <h3 class="text-green-800 font-bold mb-2">
      2025
     </h3>
     <p class="text-brown-600">
      Sustainable Development
     </p>
    </div>
    <div class="h-8 w-8 bg-brown-400 rounded-full flex items-center justify-center text-white">
     🌱
    </div>
   </div>
   <div class="absolute bottom-0 w-1 h-1/2 bg-brown-100 group-hover:bg-green-300 transition-colors">
   </div>
  </div>
 </div>
</div>
<style>
 .glow {
  filter: drop-shadow(0 0 8px rgba(147, 51, 234, 0.4));
}
</style>


<template>
 <div class="relative flex flex-col lg:flex-row items-center justify-center min-h-screen p-8 space-y-8 lg:space-y-0 lg:space-x-8">
  <!-- Style 1: Minimal Business -->
  <div class="w-full lg:w-1/3 group">
   <div class="relative flex flex-col items-center">
    <div class="absolute h-full w-1 bg-gray-200 top-4 group-hover:bg-orange-200 transition-colors">
    </div>
    <div class="flex items-center space-x-4 mb-8">
     <div class="z-10 h-8 w-8 bg-orange-500 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform">
      📅
     </div>
     <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow cursor-pointer">
      <h3 class="text-gray-800 font-bold mb-2">
       2023
      </h3>
      <p class="text-gray-600">
       Strategic Business Expansion
      </p>
      <div class="absolute -right-4 top-1/2 w-4 h-4 bg-white transform -translate-y-1/2 rotate-45">
      </div>
     </div>
    </div>
   </div>
  </div>
  <!-- Style 2: Tech Dynamic -->
  <div class="w-full lg:w-1/3 group">
   <div class="relative flex flex-col md:flex-row lg:flex-col items-center">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-300 via-purple-500 to-purple-700 opacity-20 group-hover:opacity-30 transition-opacity rounded-xl">
    </div>
    <div class="z-10 flex items-center space-y-4 md:space-y-0 md:space-x-4 lg:space-x-0 lg:space-y-4 p-6">
     <div class="h-12 w-12 bg-purple-600 rounded-full flex items-center justify-center text-white glow animate-pulse">
      🚀
     </div>
     <div class="bg-white/90 backdrop-blur-sm p-6 rounded-xl shadow-lg transform hover:-translate-y-2 transition-transform">
      <h3 class="text-purple-900 font-bold mb-2">
       2024
      </h3>
      <p class="text-purple-700">
       Tech Innovation Summit
      </p>
     </div>
    </div>
   </div>
  </div>
  <!-- Style 3: Natural Eco -->
  <div class="w-full lg:w-1/3 group">
   <div class="relative flex flex-col items-center">
    <div class="absolute inset-0 bg-gradient-to-b from-green-100 to-brown-200 opacity-50 rounded-2xl">
    </div>
    <div class="z-10 flex items-center space-x-4 mt-8">
     <div class="bg-green-200 p-6 rounded-lg shadow-md transform hover:scale-105 transition-transform cursor-pointer">
      <h3 class="text-green-800 font-bold mb-2">
       2025
      </h3>
      <p class="text-brown-600">
       Sustainable Development
      </p>
     </div>
     <div class="h-8 w-8 bg-brown-400 rounded-full flex items-center justify-center text-white">
      🌱
     </div>
    </div>
    <div class="absolute bottom-0 w-1 h-1/2 bg-brown-100 group-hover:bg-green-300 transition-colors">
    </div>
   </div>
  </div>
 </div>
 <style>
  .glow {
  filter: drop-shadow(0 0 8px rgba(147, 51, 234, 0.4));
}
 </style>
</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="relative flex flex-col lg:flex-row items-center justify-center min-h-screen p-8 space-y-8 lg:space-y-0 lg:space-x-8">
 <!-- Style 1: Minimal Business -->
 <div class="w-full lg:w-1/3 group">
  <div class="relative flex flex-col items-center">
   <div class="absolute h-full w-1 bg-gray-200 top-4 group-hover:bg-orange-200 transition-colors">
   </div>
   <div class="flex items-center space-x-4 mb-8">
    <div class="z-10 h-8 w-8 bg-orange-500 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform">
     📅
    </div>
    <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow cursor-pointer">
     <h3 class="text-gray-800 font-bold mb-2">
      2023
     </h3>
     <p class="text-gray-600">
      Strategic Business Expansion
     </p>
     <div class="absolute -right-4 top-1/2 w-4 h-4 bg-white transform -translate-y-1/2 rotate-45">
     </div>
    </div>
   </div>
  </div>
 </div>
 <!-- Style 2: Tech Dynamic -->
 <div class="w-full lg:w-1/3 group">
  <div class="relative flex flex-col md:flex-row lg:flex-col items-center">
   <div class="absolute inset-0 bg-gradient-to-r from-blue-300 via-purple-500 to-purple-700 opacity-20 group-hover:opacity-30 transition-opacity rounded-xl">
   </div>
   <div class="z-10 flex items-center space-y-4 md:space-y-0 md:space-x-4 lg:space-x-0 lg:space-y-4 p-6">
    <div class="h-12 w-12 bg-purple-600 rounded-full flex items-center justify-center text-white glow animate-pulse">
     🚀
    </div>
    <div class="bg-white/90 backdrop-blur-sm p-6 rounded-xl shadow-lg transform hover:-translate-y-2 transition-transform">
     <h3 class="text-purple-900 font-bold mb-2">
      2024
     </h3>
     <p class="text-purple-700">
      Tech Innovation Summit
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Style 3: Natural Eco -->
 <div class="w-full lg:w-1/3 group">
  <div class="relative flex flex-col items-center">
   <div class="absolute inset-0 bg-gradient-to-b from-green-100 to-brown-200 opacity-50 rounded-2xl">
   </div>
   <div class="z-10 flex items-center space-x-4 mt-8">
    <div class="bg-green-200 p-6 rounded-lg shadow-md transform hover:scale-105 transition-transform cursor-pointer">
     <h3 class="text-green-800 font-bold mb-2">
      2025
     </h3>
     <p class="text-brown-600">
      Sustainable Development
     </p>
    </div>
    <div class="h-8 w-8 bg-brown-400 rounded-full flex items-center justify-center text-white">
     🌱
    </div>
   </div>
   <div class="absolute bottom-0 w-1 h-1/2 bg-brown-100 group-hover:bg-green-300 transition-colors">
   </div>
  </div>
 </div>
</div>
<style>
 .glow {
  filter: drop-shadow(0 0 8px rgba(147, 51, 234, 0.4));
}
</style>

</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.

55
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.

6
0