Composant de chronologie
Un composant de chronologie simple et réactif avec une palette de couleurs monochromatiques et des effets 3D subtils, adapté aux sites Web de voyage/tourisme. Inclut la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Brutalist_Sepia_Timeline_Documentation
Un composant de chronologie complexe, de style brutaliste, pour la documentation ou les sites wiki, avec des tons sépia/brun et une réactivité totale avec prise en charge du mode sombre. Conçu avec un contraste élevé et une esthétique brute.
Chronologie rétro
Un composant de chronologie simple, rétro/vintage utilisant Tailwind CSS, conçu pour les portfolios. Il dispose d’une mise en page réactive et d’un support en mode sombre, utilisant des couleurs complémentaires.
Composant de chronologie
Un composant de chronologie réactif simple conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise. Il dispose d’un support de thème sombre et utilise Tailwind CSS pour le style.