Componente Timeline
Un componente della timeline semplice e reattivo con una combinazione di colori monocromatica ed effetti 3D sottili, adatto per siti Web di viaggi/turismo. Include il supporto per la modalità oscura.
Codice 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>Componenti correlati
Brutalist_Sepia_Timeline_Documentation
Un componente complesso della timeline in stile brutalista per la documentazione o i siti wiki, con toni seppia/marrone e piena reattività con supporto per la modalità scura. Progettato con un contrasto elevato e un'estetica grezza.
Componente della timeline dei social media - Glassmorphism
Un componente complesso e reattivo della timeline dei social media con design glassmorphism con combinazione di colori analoga, supporto per la modalità oscura ed elementi interattivi per le interfacce di social networking.
Componente Timeline
Componente Timeline con design 3D, effetti reattivi e supporto per temi scuri