Timeline 组件

<div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">

  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-center text-4xl sm:text-5xl font-extrabold mb-12 relative overflow-hidden">
      <span class="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-rose-600 to-red-800 dark:from-orange-300 dark:via-rose-500 dark:to-red-700">
        Community Journey
      </span>
      <span class="absolute inset-0 z-0 blur-lg opacity-70 bg-gradient-to-r from-orange-400 via-rose-600 to-red-800 dark:from-orange-300 dark:via-rose-500 dark:to-red-700 animate-pulse-light"></span>
    </h2>

    <div class="relative before:absolute before:inset-y-0 before:left-3 sm:before:left-1/2 before:w-1 before:bg-gradient-to-b before:from-orange-500 before:via-rose-700 before:to-red-900 dark:before:from-orange-400 dark:before:via-rose-600 dark:before:to-red-800 before:origin-top before:scale-y-0 before:animate-timeline-grow">

      <!-- Timeline Item 1 -->
      <div class="timeline-item flex items-center w-full my-8 group">
        <div class="hidden sm:block sm:w-1/2 text-right pr-8">
          <div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
            <div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
            <span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">October 26, 2023</span>
            <h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">New Horizons Launched!</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">The community officially opened its doors, welcoming pioneers from around the globe. Discussions began on crafting our collective future.</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Launch day" class="mt-4 rounded-md object-cover w-full h-32 opacity-80 group-hover:opacity-100 transition-opacity duration-300">
          </div>
        </div>

        <div class="w-8 h-8 rounded-full bg-orange-500 dark:bg-orange-400 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
                    ring-4 ring-orange-300 dark:ring-orange-600 z-10 custom-glow-sm">
          <span class="text-lg font-bold text-gray-900 dark:text-gray-100">1</span>
        </div>

        <div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
          <div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
            <div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
            <span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">October 26, 2023</span>
            <h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">New Horizons Launched!</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">The community officially opened its doors, welcoming pioneers from around the globe. Discussions began on crafting our collective future.</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Launch day" class="mt-4 rounded-md object-cover w-full h-32 opacity-80 group-hover:opacity-100 transition-opacity duration-300">
          </div>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="timeline-item flex items-center w-full my-8 group flex-row-reverse">
        <div class="hidden sm:block sm:w-1/2 text-left pl-8">
          <div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
            <div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
            <span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">November 15, 2023</span>
            <h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">First Community Poll</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Our members cast their votes on the initial shared resource allocation, a true test of our collaborative spirit.</p>
            <div class="flex items-center mt-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-rose-500">
              <div>
                <p class="text-gray-600 dark:text-gray-400 text-xs">Poll initiated by</p>
                <p class="font-medium text-rose-600 dark:text-rose-500">Elara_Sage</p>
              </div>
            </div>
          </div>
        </div>

        <div class="w-8 h-8 rounded-full bg-rose-700 dark:bg-rose-600 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
                    ring-4 ring-rose-300 dark:ring-rose-800 z-10 custom-glow-sm">
          <span class="text-lg font-bold text-gray-900 dark:text-gray-100">2</span>
        </div>

        <div class="w-full sm:w-1/2 sm:pr-8 pl-4 sm:pl-0">
          <div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
            <div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
            <span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">November 15, 2023</span>
            <h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">First Community Poll</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Our members cast their votes on the initial shared resource allocation, a true test of our collaborative spirit.</p>
            <div class="flex items-center mt-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-rose-500">
              <div>
                <p class="text-gray-600 dark:text-gray-400 text-xs">Poll initiated by</p>
                <p class="font-medium text-rose-600 dark:text-rose-500">Elara_Sage</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="timeline-item flex items-center w-full my-8 group">
        <div class="hidden sm:block sm:w-1/2 text-right pr-8">
          <div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-red-900 dark:border-red-800 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
            <div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-red-900 dark:bg-red-800 rotate-45"></div>
            <span class="block text-sm font-semibold text-red-800 dark:text-red-700 mb-1">December 01, 2023</span>
            <h3 class="text-xl font-bold mb-2 text-red-900 dark:text-red-800 custom-glow">Knowledge Hub Unveiled</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A new section dedicated to shared learning resources, tutorials, and FAQs was launched, fostering self-sufficiency.</p>
            <div class="flex flex-wrap gap-2 mt-4">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Guides</span>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Tutorials</span>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">FAQs</span>
            </div>
          </div>
        </div>

        <div class="w-8 h-8 rounded-full bg-red-900 dark:bg-red-800 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
                    ring-4 ring-red-300 dark:ring-red-900 z-10 custom-glow-sm">
          <span class="text-lg font-bold text-gray-900 dark:text-gray-100">3</span>
        </div>

        <div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
          <div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-red-900 dark:border-red-800 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
            <div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-red-900 dark:bg-red-800 rotate-45"></div>
            <span class="block text-sm font-semibold text-red-800 dark:text-red-700 mb-1">December 01, 2023</span>
            <h3 class="text-xl font-bold mb-2 text-red-900 dark:text-red-800 custom-glow">Knowledge Hub Unveiled</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A new section dedicated to shared learning resources, tutorials, and FAQs was launched, fostering self-sufficiency.</p>
            <div class="flex flex-wrap gap-2 mt-4">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Guides</span>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Tutorials</span>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">FAQs</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="timeline-item flex items-center w-full my-8 group flex-row-reverse">
        <div class="hidden sm:block sm:w-1/2 text-left pl-8">
          <div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
            <div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
            <span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">January 10, 2024</span>
            <h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">First Community Event</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A successful virtual meet-up brought members closer, with shared stories and future plans discussed.</p>
            <div class="flex -space-x-2 mt-4">
              <img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amy's avatar">
              <img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="John's avatar">
              <img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Sarah's avatar">
              <div class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600 bg-orange-500 flex items-center justify-center text-white text-sm font-medium">+50</div>
            </div>
          </div>
        </div>

        <div class="w-8 h-8 rounded-full bg-orange-500 dark:bg-orange-400 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
                    ring-4 ring-orange-300 dark:ring-orange-600 z-10 custom-glow-sm">
          <span class="text-lg font-bold text-gray-900 dark:text-gray-100">4</span>
        </div>

        <div class="w-full sm:w-1/2 sm:pr-8 pl-4 sm:pl-0">
          <div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
            <div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
            <span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">January 10, 2024</span>
            <h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">First Community Event</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A successful virtual meet-up brought members closer, with shared stories and future plans discussed.</p>
            <div class="flex -space-x-2 mt-4">
              <img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amy's avatar">
              <img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="John's avatar">
              <img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Sarah's avatar">
              <div class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600 bg-orange-500 flex items-center justify-center text-white text-sm font-medium">+50</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Timeline Item 5 -->
      <div class="timeline-item flex items-center w-full my-8 group">
        <div class="hidden sm:block sm:w-1/2 text-right pr-8">
          <div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
            <div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
            <span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">February 20, 2024</span>
            <h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">Moderation Team Expansion</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Growing pains led to the expansion of our dedicated moderation team, ensuring a safe and vibrant space.</p>
            <a href="#" class="mt-4 inline-flex items-center text-rose-600 dark:text-rose-500 hover:text-rose-800 dark:hover:text-rose-700 font-medium transition-colors duration-200">
              Meet the Team
              <svg class="ml-2 w-4 h-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>

        <div class="w-8 h-8 rounded-full bg-rose-700 dark:bg-rose-600 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
                    ring-4 ring-rose-300 dark:ring-rose-800 z-10 custom-glow-sm">
          <span class="text-lg font-bold text-gray-900 dark:text-gray-100">5</span>
        </div>

        <div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
          <div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
            <div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
            <span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">February 20, 2024</span>
            <h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">Moderation Team Expansion</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Growing pains led to the expansion of our dedicated moderation team, ensuring a safe and vibrant space.</p>
            <a href="#" class="mt-4 inline-flex items-center text-rose-600 dark:text-rose-500 hover:text-rose-800 dark:hover:text-rose-700 font-medium transition-colors duration-200">
              Meet the Team
              <svg class="ml-2 w-4 h-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <style>
    @keyframes pulse-light {
      0% { opacity: 0.7; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.02); }
      100% { opacity: 0.7; transform: scale(1); }
    }

    @keyframes glow {
      0% { text-shadow: 0 0 5px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 69, 0, 0.4); }
      50% { text-shadow: 0 0 10px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 69, 0, 0.6); }
      100% { text-shadow: 0 0 5px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 69, 0, 0.4); }
    }

    @keyframes glow-dark {
      0% { text-shadow: 0 0 5px rgba(251, 146, 60, 0.5), 0 0 10px rgba(244, 63, 94, 0.4); }
      50% { text-shadow: 0 0 10px rgba(251, 146, 60, 0.8), 0 0 20px rgba(244, 63, 94, 0.6); }
      100% { text-shadow: 0 0 5px rgba(251, 146, 60, 0.5), 0 0 10px rgba(244, 63, 94, 0.4); }
    }

    @keyframes glow-sm {
      0% { box-shadow: 0 0 3px rgba(255, 165, 0, 0.6), 0 0 6px rgba(255, 69, 0, 0.4); }
      50% { box-shadow: 0 0 6px rgba(255, 165, 0, 0.9), 0 0 12px rgba(255, 69, 0, 0.7); }
      100% { box-shadow: 0 0 3px rgba(255, 165, 0, 0.6), 0 0 6px rgba(255, 69, 0, 0.4); }
    }

    @keyframes glow-sm-dark {
      0% { box-shadow: 0 0 3px rgba(251, 146, 60, 0.6), 0 0 6px rgba(244, 63, 94, 0.4); }
      50% { box-shadow: 0 0 6px rgba(251, 146, 60, 0.9), 0 0 12px rgba(244, 63, 94, 0.7); }
      100% { box-shadow: 0 0 3px rgba(251, 146, 60, 0.6), 0 0 6px rgba(244, 63, 94, 0.4); }
    }

    .animate-pulse-light {
      animation: pulse-light 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .custom-glow {
      animation: glow 3s ease-in-out infinite;
    }

    .dark .custom-glow {
      animation: glow-dark 3s ease-in-out infinite;
    }

    .custom-glow-sm {
      animation: glow-sm 2.5s ease-in-out infinite;
    }

    .dark .custom-glow-sm {
      animation: glow-sm-dark 2.5s ease-in-out infinite;
    }

    @keyframes timeline-grow {
      0% {
        transform: scaleY(0);
        transform-origin: top;
      }
      100% {
        transform: scaleY(1);
        transform-origin: top;
      }
    }

    .animate-timeline-grow {
      animation: timeline-grow 2s ease-out forwards;
    }

    /* Fallback for sm: breakpoints for flex-direction */
    .timeline-item > div:first-child {
      width: 100%; /* Default for mobile */
      text-align: left;
      padding-right: 0;
    }
    .timeline-item.flex-row-reverse > div:first-child {
      text-align: left;
      padding-left: 0;
    }

    @media (min-width: 640px) {
      .timeline-item > div:first-child {
        width: 50%;
        text-align: right;
        padding-right: 2rem; /* Matches sm:pr-8 */
      }
      .timeline-item.flex-row-reverse > div:first-child {
        text-align: left;
        padding-left: 2rem; /* Matches sm:pl-8 */
      }
      .timeline-item > div:last-child {
        width: 50%;
        padding-left: 2rem; /* Matches sm:pl-8 */
        padding-right: 0; /* Clear mobile pr-4 */
      }
      .timeline-item.flex-row-reverse > div:last-child {
        padding-right: 2rem; /* Matches sm:pr-8 */
        padding-left: 0; /* Clear mobile pl-4 */
      }
    }
  </style>
</div>