Search Components

Timeline

Visual representation of events in chronological order

Gaming Timeline Component

A simple, vibrant, and responsive timeline component with a subtle 3D design optimized for gaming websites, featuring dark mode support.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-gray-900 dark:to-black min-h-screen font-sans">

  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-fuchsia-500 dark:from-red-400 dark:to-fuchsia-400 drop-shadow-lg leading-tight">
    <span class="block">Epic Milestones</span>
    <span class="block text-2xl md:text-3xl lg:text-4xl font-semibold opacity-80 text-white dark:text-gray-200 mt-2">The Journey of Valor</span>
  </h2>

  <div class="max-w-4xl mx-auto relative">

    <!-- Timeline Line -->
    <div class="absolute left-1/2 -translate-x-1/2 w-1 h-full bg-gradient-to-b from-yellow-400 via-pink-500 to-purple-600 dark:from-yellow-300 dark:via-pink-400 dark:to-purple-500 shadow-xl rounded-full z-0"></div>

    <!-- Timeline Items Container -->
    <div class="space-y-16 relative z-10">

      <!-- Timeline Item 1 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-blue-800 dark:border-blue-900 relative group">
            <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-pink-500 to-red-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">New Chapter!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Dawn of Realms</h3>
            <p class="text-indigo-100 text-lg opacity-90">The ancient prophecy fulfilled, heroes unite to face the encroaching shadows. The first realm is reclaimed.</p>
            <span class="block text-indigo-200 text-sm mt-3 opacity-70">Q1 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-yellow-300 dark:to-orange-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.24 1.5l1.63 3.32a.5.5 0 00.37.27l3.66.53a.5.5 0 01.28.85l-2.65 2.58a.5.5 0 00-.14.44l.63 3.65a.5.5 0 01-.73.53L10 13.06a.5.5 0 00-.46 0l-3.27 1.72a.5.5 0 01-.73-.53l.63-3.65a.5.5 0 00-.14-.44l-2.65-2.58a.5.5 0 01.28-.85l3.66-.53a.5.5 0 00.37-.27L9.24 1.5z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 order-2 md:order-1 text-right">
          <!-- Empty for alternating layout -->
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-fuchsia-600 dark:from-red-400 dark:to-fuchsia-500 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 order-1 md:order-2">
          <div class="bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-600 dark:to-teal-700 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-green-700 dark:border-green-800 relative group">
             <span class="absolute -top-3 -left-3 px-4 py-1 bg-gradient-to-br from-orange-400 to-yellow-500 text-white text-sm font-bold rounded-lg shadow-lg -rotate-3">Expansion!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Emerald Jungle</h3>
            <p class="text-teal-100 text-lg opacity-90">New exotic lands are discovered, bringing unique challenges and powerful artifacts. Guilds establish outposts.</p>
            <span class="block text-teal-200 text-sm mt-3 opacity-70">Q3 2024</span>
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-purple-600 to-pink-700 dark:from-purple-700 dark:to-pink-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-purple-800 dark:border-purple-900 relative group">
             <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">Major Event!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Shadow Citadel Falls</h3>
            <p class="text-pink-100 text-lg opacity-90">After a grueling siege, the ultimate fortress of evil is vanquished. The world breathes a sigh of temporary peace.</p>
            <span class="block text-pink-200 text-sm mt-3 opacity-70">Q4 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L11.586 2.586A2 2 0 0010.172 2H6zM6 4h4v3a1 1 0 001 1h3v7a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1zm3 8a1 1 0 00-1 1v1a1 1 0 001 1h2a1 1 0 001-1v-1a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

    </div>
  </div>

</div>

A responsive timeline component with a candy/sweet color scheme, gradient transitions, and dark mode support, suitable for showcasing work or products in a portfolio. Features multiple timeline events.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-pink-100 via-purple-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 py-12 sm:py-16 lg:py-20">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-16
               bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-600 to-indigo-600
               dark:from-pink-400 dark:via-purple-500 dark:to-indigo-400">
      Our Journey
    </h2>

    <div class="relative before:absolute before:inset-0 before:top-2 before:bottom-2 before:w-1 before:bg-gradient-to-b before:from-pink-400 before:via-purple-500 before:to-indigo-500 before:left-1/2 before:-translate-x-1/2 before:rounded-full dark:before:from-pink-600 dark:before:via-purple-700 dark:before:to-indigo-700">

      <!-- Timeline Item 1 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Project Alpha Launch</h3>
            <p class="mb-4 text-md sm:text-lg">Successfully launched our flagship product, revolutionizing the industry with its innovative features and user-centric design.</p>
            <img src="https://picsum.photos/600/400?random=1" alt="Project Alpha screenshots" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">October 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-purple-300 dark:hover:border-indigo-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-purple-50 via-indigo-50 to-pink-50 dark:from-gray-700 dark:via-indigo-900 dark:to-purple-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-500 dark:to-indigo-400">Partnership Expansion</h3>
            <p class="mb-4 text-md sm:text-lg">Forged strategic alliances with key industry leaders, expanding our reach and service capabilities globally.</p>
            <img src="https://picsum.photos/600/400?random=2" alt="Partnership handshake" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-purple-600 dark:text-purple-400 font-semibold">December 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-purple-500 to-indigo-500 dark:from-purple-700 dark:to-indigo-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a1 1 0 100-2 1 1 0 000 2zM5 8a2 2 0 100 4h10a2 2 0 100-4H5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-indigo-300 dark:hover:border-pink-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-indigo-50 via-pink-50 to-purple-50 dark:from-gray-700 dark:via-pink-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-pink-600 dark:from-indigo-400 dark:to-pink-500">Community Growth</h3>
            <p class="mb-4 text-md sm:text-lg">Our user community grew by 500%, fostering a vibrant ecosystem of engagement and feedback.</p>
            <img src="https://picsum.photos/600/400?random=3" alt="Group of people smiling" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold">February 2024</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-indigo-500 to-pink-500 dark:from-indigo-700 dark:to-pink-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A.75.75 0 015.25 15h-.5a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v1.5a.75.75 0 01-.75.75H13zm5.75-2.75a.75.75 0 00-.75-.75h-10.5c-.414 0-.75.336-.75.75v3.5A.75.75 0 005 17h10a.75.75 0 00.75-.75v-3.5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Future Endeavors</h3>
            <p class="mb-4 text-md sm:text-lg">Exploring new technologies and markets to bring even more value to our users and stakeholders.</p>
            <img src="https://picsum.photos/600/400?random=4" alt="Future looking abstract image" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">Present & Beyond</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 3c-.966 0-1.895.143-2.75.405V6a.75.75 0 001.5 0V4.604c.59-.224 1.23-.365 1.9-.365 2.87 0 5.1-.88 5.1-2h-.057c-.126-1.58-1.543-2.83-3.268-2.909a.75.75 0 00-.734.708l.334 3.344a.75.75 0 001.492-.149l-.21-2.09c.654.148 1.15.54 1.488 1.05v.23a.75.75 0 001.5 0v-1c0-.496-.345-.92-.81-1.096A6.25 6.25 0 0010.75 3v13c.966 0 1.895-.143 2.75-.405V14a.75.75 0 00-1.5 0v1.396c-.59.224-1.23.365-1.9.365-2.87 0-5.1.88-5.1 2h.057c.126 1.58 1.543 2.83 3.268 2.909a.75.75 0 00.734-.708l-.334-3.344a.75.75 0 00-1.492.149l.21 2.09c-.654-.148-1.15-.54-1.488-1.05v-.23a.75.75 0 00-1.5 0v1c0 .496.345.92.81 1.096A6.25 6.25 0 0010.75 17z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

    </div>
  </div>
</div>

Social Media Timeline Component - Glassmorphism

A complex, responsive social media timeline component featuring glassmorphism design with analogous color scheme, dark mode support, and interactive elements for social networking interfaces.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-gray-900 dark:text-white relative z-10">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-purple-500">Your Feed</span>
    </h1>

    <div class="space-y-8 relative">
      <!-- Timeline Line -->
      <div class="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-blue-300 to-indigo-400 dark:from-blue-600 dark:to-purple-700 h-full hidden md:block"></div>

      <!-- Post 1 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-400 dark:border-blue-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Alex Johnson</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@alex_joh &#x2022; 2 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Just finished an amazing hike! The views were absolutely breathtaking. Nature truly is the best therapy. #Hiking #NatureLover #AdventureTime
            </p>
            <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>128</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>34</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-blue-500 dark:text-blue-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-md"></div>
      </article>

      <!-- Post 2 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-400 dark:border-indigo-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Sarah Chen</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@sarah_c_design &#x2022; 4 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              New design mockups are finally ready! So excited to get feedback on the new UX flow. What do you all think of the dark mode implementation?
            </p>
            <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>210</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>58</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-indigo-500 dark:text-indigo-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-indigo-300 dark:border-indigo-600 shadow-md"></div>
      </article>

      <!-- Post 3 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-purple-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Michael Lee</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@mike_dev &#x2022; 8 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Coding late tonight, building out new features for the app! Energy drinks and good music are getting me through. Almost there! 💻 #FrontendDev #CodingLife
            </p>
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>95</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>21</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-purple-500 dark:text-purple-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-purple-300 dark:border-purple-600 shadow-md"></div>
      </article>
    </div>
  </div>
</div>

Timeline Component

A responsive timeline component for dashboards, with microinteractions and a pastel color scheme, featuring dark theme support. It uses Tailwind CSS for styling and includes placeholder images from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Timeline</h1>

  <div class="relative max-w-2xl mx-auto">
    <!-- Vertical line -->
    <div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-pastel-200 dark:bg-pastel-700 h-full"></div>

    <!-- Timeline Item 1 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New User Registration</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">John Doe just registered an account. Welcome him aboard!</p>
        <img src="https://picsum.photos/seed/user1/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
      </div>
    </div>

    <!-- Timeline Item 2 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Sales Report Generated</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Monthly sales report for Q3 is now available for review.</p>
        <div class="flex items-center mt-4">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <span class="text-gray-700 dark:text-gray-300 text-sm">Report by: Jane Smith</span>
        </div>
      </div>
    </div>

    <!-- Timeline Item 3 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Server Maintenance</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Scheduled server maintenance completed successfully.</p>
        <img src="https://picsum.photos/seed/server/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
      </div>
    </div>

    <!-- Timeline Item 4 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New Feature Release</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Exciting new analytics features have been rolled out!</p>
        <div class="flex items-center mt-4">
          <img src="https://randomuser.me/api/portraits/women/50.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <span class="text-gray-700 dark:text-gray-300 text-sm">Announced by: Sarah Lee</span>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom Pastel Colors */
  .bg-pastel-200 { background-color: #e2e8f0; } /* Light Blue-Gray */
  .dark\:bg-pastel-700 { background-color: #4a5568; } /* Dark Blue-Gray */
  .bg-pastel-400 { background-color: #9f7aea; } /* Medium Purple */
  .dark\:bg-pastel-600 { background-color: #6b46c1; } /* Darker Purple */

  /* Responsive adjustments for timeline */
  @media (max-width: 768px) {
    .right-timeline, .left-timeline {
      justify-content: flex-end;
    }
    .right-timeline .order-1, .left-timeline .order-1 {
      width: 10/12;
    }
    .right-timeline .z-20, .left-timeline .z-20 {
      transform: translateX(50%);
    }
    .right-timeline,
    .left-timeline {
      left: 0;
    }
    .left-timeline {
      flex-direction: row;
    }
    /* Adjust the vertical line for mobile */
    .absolute.left-1\/2 {
      left: 50%; /* Keep it centered for simplicity, or adjust for responsiveness */
    }
  }
</style>

Social Media Timeline Component

A simple, responsive timeline component for social media, designed with Material Design principles. It uses earth tones and includes dark mode support. Each timeline item displays a user avatar, name, a post title, and a placeholder image, typical for social media feeds.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8">
  <div class="container mx-auto max-w-2xl">
    <h1 class="text-4xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Social Feed Timeline</h1>

    <!-- Timeline Item 1 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>

      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">John Doe posted an update</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Exploring the beautiful trails today! #nature #hiking</p>
          <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">2 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Jane Smith shared a new recipe</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Delighted with this new homemade bread recipe! So satisfying. #baking #foodie</p>
          <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">5 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Mike Johnson attended an event</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Great time at the local tech meetup! Learned a lot. #tech #community</p>
          <img src="https://picsum.photos/600/400?random=3" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">1 day ago</div>
        </div>
      </div>
    </div>

  </div>
</div>

Timeline Component

A responsive timeline component with Glassmorphism design, complementary color scheme, and dark theme support, suitable for business websites. It features frosted glass-like translucent elements with blur effects.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black py-10 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 dark:text-white mb-16 drop-shadow-lg">
      Company Milestones
    </h1>

    <div class="relative">
      <div class="hidden md:block absolute w-1 h-full bg-blue-400 dark:bg-purple-600 left-1/2 transform -translate-x-1/2 rounded-full shadow-lg"></div>

      <!-- Timeline Item - Left Aligned -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-start md:justify-end mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Foundation & Early Growth</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Established in 20XX, we quickly grew our client base by focusing on innovative solutions and customer satisfaction. Our initial team laid the groundwork for future success and expansion.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">January 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-end md:justify-start"></div>
      </div>

      <!-- Timeline Item - Right Aligned -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-end md:justify-start mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
             <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Technological Advancements</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Introduced cutting-edge AI and machine learning capabilities, revolutionizing our product offerings and providing clients with unparalleled insights and efficiency.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">June 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-start md:justify-end"></div>
      </div>
      
      <!-- Timeline Item - Left Aligned (again) -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-start md:justify-end mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Global Expansion</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Successfully launched operations in several international markets, establishing our presence on a global scale and expanding our diverse customer base.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">November 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-end md:justify-start"></div>
      </div>

       <!-- Timeline Item - Right Aligned (again) -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-end md:justify-start mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
             <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Sustainable Initiatives</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Launched comprehensive sustainability programs, significantly reducing our carbon footprint and reinforcing our commitment to environmental responsibility.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">March 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-start md:justify-end"></div>
      </div>


    </div>
  </div>
</div>

Timeline Component

A Minimalist/Flat Design timeline component for showcasing work or products in a portfolio, designed with responsiveness and dark mode support using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">My Portfolio Timeline</h2>
    <div class="relative">
        <div class="flex flex-col">
            <!-- Timeline Item 1 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 2 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 3 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 4 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Timeline Component

A simple retro/vintage timeline component designed to showcase work or products with a nostalgic 80s/90s aesthetic, using an analogous color scheme for dark mode support.

Open Preview

                <div class="flex flex-col items-center p-4">
    <h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
    <div class="flex flex-col space-y-8">
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
    </div>
</div>

Grayscale Social Media Timeline

A responsive, dark-mode ready social media timeline component built with Tailwind CSS. It features a strict grayscale color scheme, and complex post cards with user avatars, post content (text and images), engagement stats, and action buttons. Designed for social networking interfaces with multiple interactive elements on each post. The design supports dark backgrounds to reduce eye strain. No JavaScript is used.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 py-12 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-2xl">
    <h1 class="text-3xl sm:text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8 sm:mb-12">
      Community Feed
    </h1>
    
    <div class="space-y-8 sm:space-y-12">
      
      <!-- Post 1 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Sarah Miller</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Exploring the city vibes today! Found this amazing little cafe. ☕️ Highly recommend the almond croissant.
            The architecture around here is stunning. So much history! #CityLife #CafeHopping #UrbanExploration
          </p>
        </div>

        <!-- Post Content Image -->
        <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/citycafe/800/500" alt="Cafe image" class="w-full h-auto object-cover max-h-[500px]">
        </div>

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>1.2k Likes</span></div>
          <div><span>87 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 1 -->

      <!-- Post 2 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Alex Johnson</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Just finished a great workout session. Feeling energized! 💪 Remember to stay hydrated folks. #FitnessMotivation #HealthyLifestyle
          </p>
        </div>
        
        <!-- Post Content Image (Optional - No image for this post to show variation) -->
        <!-- <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/workout/800/400" alt="Workout image" class="w-full h-auto object-cover max-h-[500px]">
        </div> -->

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>850 Likes</span></div>
          <div><span>45 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
             <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
             <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 2 -->

      <!-- Post 3 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Linda K.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Spent the afternoon reading in the park. Such a peaceful escape from the hustle and bustle. What are you reading currently?
            #BookLover #PeacefulMoments #NatureReads 🌳📖
          </p>
        </div>

        <!-- Post Content Image -->
        <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/parkreading/800/550" alt="Park reading image" class="w-full h-auto object-cover max-h-[500px]">
        </div>

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>980 Likes</span></div>
          <div><span>152 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 3 -->

    </div>
  </div>
</div>

Retro/Vintage Timeline Component

A responsive timeline component with a retro/vintage design, vibrant colors, and dark mode support. Suitable for showcasing a portfolio.

Open Preview

                <div class="container mx-auto px-4 py-8">
  <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-blue-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 1</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </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-purple-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-purple-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 2</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
         <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </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-green-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-green-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 3</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
         <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </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-red-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 4</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
         <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </div>
    </div>

  </div>
</div>

Search Components

Categories

Timeline