Timeline

Visual representation of events in chronological order

Timeline Component with Glassmorphism

Timeline component with Glassmorphism style, responsive and with dark theme support

                <section class="dark:bg-gray-900 bg-gray-100 py-10">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10">Event Timeline</h2>
        <div class="flex flex-col md:flex-row justify-center items-center">
            <!-- Event 1 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: March 10, 2023</span>
                </div>
            </div>
            <!-- Event 2 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 2</h3>
                    <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: April 15, 2023</span>
                </div>
            </div>
            <!-- Event 3 -->
            <div class="flex flex-col items-center md:w-1/3 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <span class="text-sm text-gray-600 dark:text-gray-400">Date: May 20, 2023</span>
                </div>
            </div>
        </div>
    </div>
</section>

Timeline Component

A responsive timeline component with dark mode support and microinteractions using Tailwind CSS. No JavaScript required.

Open Preview

                <div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:grid grid-cols-12 text-gray-50">
    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 1</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 2</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 3</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

  </div>
</div>

Timeline Component

Timeline Component with 3D design, responsive effects, and dark theme support

Open Preview

                <div class="container mx-auto p-4">
  <h1 class="text-4xl font-bold text-center mb-8 dark:text-white">Timeline</h1>

  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border" style="left: 50%;"></div>

    <!-- right timeline -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 1</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>

    <!-- left timeline -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 2</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>
    
        <!-- right timeline -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 3</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>
    
    <!-- left timeline -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 4</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>
  </div>
</div>

Retro/Vintage Timeline Component

A responsive timeline component with retro/vintage design and dark mode support.

Open Preview

                <div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-purple-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 1</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1985</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-pink-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 2</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-green-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 3</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1995</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-yellow-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 4</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Skeuomorphic Timeline Component

A Skeuomorphic Timeline Component with responsive effects and dark theme support, built using Tailwind CSS. No JavaScript needed, only HTML and CSS.

Open Preview

                <div class="container mx-auto px-4 py-8">

  <!-- Skeuomorphic Timeline -->
  <div class="relative">
    <!-- Vertical Line (mimics a physical line) -->
    <div class="border-r-4 border-gray-300 dark:border-gray-700 absolute h-full top-0 left-1/2 transform -translate-x-1/2"></div>

    <!-- Timeline Items -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 1</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 2</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

     <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 3</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

      <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 4</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

  </div>
</div>

<style>
  /* Styles for a simple skeuomorphic look */
  .left-timeline .bg-white,
  .right-timeline .bg-white {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }

   .dark .left-timeline .bg-gray-800,
  .dark .right-timeline .bg-gray-800 {
    box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #2e2e2e;
  }

  .left-timeline .bg-white.dark\:bg-gray-800,
  .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #d1d5db; /* subtle light border */
  }

   .dark .left-timeline .bg-white.dark\:bg-gray-800,
  .dark .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #4b5563; /* subtle dark border */
  }


   @media (max-width: 768px) {
      .left-timeline, .right-timeline {
        justify-content: flex-end;
      }

      .left-timeline .w-5/12,
      .right-timeline .w-5/12 {
        width: 100%;
      }

       .left-timeline .px-1,
      .right-timeline .px-1 {
        padding-left: 1rem;
         padding-right: 1rem;
      }


      .left-timeline .text-left,
      .right-timeline .text-right {
        text-align: left;
      }

      .left-timeline .order-1,
      .right-timeline .order-1 {
        order: 1;
      }

      .left-timeline .w-5/12:nth-child(1),
      .right-timeline .w-5/12:nth-child(1) {
        order: 2;
      }


      .left-timeline .rounded-full,
      .right-timeline .rounded-full {
        position: relative;
        left: auto;
        transform: none;
        margin-right: 1rem;
      }

       .border-r-4 {
        border-right-width: 0;
        border-left-width: 4px;
        left: 1rem;
      }
  }
</style>

Neumorphism Timeline Component

A responsive Timeline Component styled with Neumorphism using Tailwind CSS, featuring dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="w-full max-w-3xl space-y-8">
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 1</h2>
            <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=1" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 2</h2>
            <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=2" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 3</h2>
            <p class="text-gray-600 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=3" alt="Random Image" />
        </div>
    </div>
</div>

<style>
    @layer components {
        .shadow-neumorphism {
            box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2),
                        -8px -8px 15px rgba(255, 255, 255, 0.3);
        }
    }
</style>

Categories

Timeline

Timeline Component with Glassmorphism

Timeline Component

Timeline Component

Retro/Vintage Timeline Component

Skeuomorphic Timeline Component

Neumorphism Timeline Component