HTML 代码
<div class="bg-gray-100 dark:bg-gray-900 py-12 sm:py-16 lg:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-gray-900 dark:text-gray-50 mb-12 sm:mb-16 tracking-tight">
Your Journey So Far
</h2>
<div class="relative before:absolute before:inset-y-0 before:left-1/2 before:-ml-px before:w-0.5 before:bg-gray-300 dark:before:bg-gray-700 before:hidden md:before:block pb-10">
<!-- Event 1: Left Aligned -->
<div class="relative flex flex-col md:flex-row items-center md:justify-start mb-10">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:translate-x-12">
<div class="absolute -left-3 top-1/2 -translate-y-1/2 hidden md:block">
<div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
</div>
<img src="https://picsum.photos/400/250?random=1" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">June 15, 2023</p>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Arrival in Paris</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Kicking off the adventure with the iconic Eiffel Tower and charming Parisian cafes. A dream come true!</p>
</div>
</div>
</div>
<!-- Event 2: Right Aligned -->
<div class="relative flex flex-col md:flex-row items-center md:justify-end mb-10">
<div class="md:w-1/2 md:pl-8 text-left">
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:-translate-x-12">
<div class="absolute -right-3 top-1/2 -translate-y-1/2 hidden md:block">
<div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
</div>
<img src="https://picsum.photos/400/250?random=2" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">June 20, 2023</p>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2"> gondola Ride in Venice</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Experiencing the beauty of Venice from its canals. Pure romance and breathtaking architecture at every turn.</p>
</div>
</div>
</div>
<!-- Event 3: Left Aligned -->
<div class="relative flex flex-col md:flex-row items-center md:justify-start mb-10">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:translate-x-12">
<div class="absolute -left-3 top-1/2 -translate-y-1/2 hidden md:block">
<div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
</div>
<img src="https://picsum.photos/400/250?random=3" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">June 25, 2023</p>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Hiking in the Swiss Alps</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Majestic mountains and pristine nature. An invigorating escape into the heart of the Alps.</p>
</div>
</div>
</div>
<!-- Event 4: Right Aligned -->
<div class="relative flex flex-col md:flex-row items-center md:justify-end mb-10">
<div class="md:w-1/2 md:pl-8 text-left">
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:-translate-x-12">
<div class="absolute -right-3 top-1/2 -translate-y-1/2 hidden md:block">
<div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
</div>
<img src="https://picsum.photos/400/250?random=4" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">July 01, 2023</p>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Culinary Tour in Rome</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Savoring authentic Italian pasta, pizza, and gelato. Rome's delights are a feast for the senses!</p>
</div>
</div>
</div>
<!-- Add more events following the pattern if needed -->
</div>
</div>
</div>