搜索组件

类别

组件时间线

时间线

按时间顺序可视化事件的表示

游戏时间轴组件

一个简单、充满活力且响应迅速的时间轴组件，具有针对游戏网站优化的微妙 3D 设计，具有深色模式支持。

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

Timeline 组件

响应式时间轴组件，具有 candy/sweet 配色方案、渐变过渡和深色模式支持，适合展示作品集中的作品或产品。具有多个时间轴事件。

打开预览

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

社交媒体时间线组件 - Glassmorphism

一个复杂的响应式社交媒体时间线组件，具有 glassmorphism 设计，具有类似的配色方案、深色模式支持和社交网络界面的交互式元素。

打开预览

                <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 组件

仪表板的响应式时间线组件，具有微交互和柔和的配色方案，支持深色主题。它使用 Tailwind CSS 进行样式设置，并包括来自 picsum.photos 的占位符图像和来自 randomuser.me 的头像。

打开预览

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

社交媒体时间线组件

一个简单、响应式的社交媒体时间线组件，按照 Material Design 原则设计。它使用大地色调并包括深色模式支持。每个时间轴项都显示用户头像、名称、文章标题和占位符图像，这通常是社交媒体源的典型内容。

打开预览

                <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 组件

响应式时间线组件，具有 Glassmorphism 设计、互补配色方案和深色主题支持，适用于商业网站。它具有磨砂玻璃般的半透明元素，具有模糊效果。

打开预览

                <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 组件

一个极简主义/平面设计时间轴组件，用于展示作品集中的作品或产品，使用 Tailwind CSS 设计具有响应能力和深色模式支持。

打开预览

                <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 组件

一个简单的 retro/vintage 时间轴组件，旨在展示具有怀旧 80 年代/90 年代美感的作品或产品，使用类似的配色方案来支持深色模式。

打开预览

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

灰度社交媒体时间线

使用 Tailwind CSS 构建的响应式、暗模式就绪社交媒体时间线组件。它具有严格的灰度配色方案，以及带有用户头像、帖子内容（文本和图像）、参与度统计数据和作按钮的复杂明信片。专为社交网络界面而设计，每个帖子上都有多个互动元素。该设计支持深色背景以减少眼睛疲劳。不使用 JavaScript。

打开预览

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

复古/怀旧时间轴组件

一个响应式时间轴组件，具有复古/复古设计、鲜艳的色彩和深色模式支持。适合展示投资组合。

打开预览

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