Composant de chronologie avec Glassmorphism
Composant de chronologie avec style Glassmorphism, réactif et avec prise en charge du thème sombre
HTML Code
<section class="dark:bg-gray-900 bg-gray-100 py-10">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10">Event Timeline</h2>
<div class="flex flex-col md:flex-row justify-center items-center">
<!-- Event 1 -->
<div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
<div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
<img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
</div>
<div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 1</h3>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="text-sm text-gray-600 dark:text-gray-400">Date: March 10, 2023</span>
</div>
</div>
<!-- Event 2 -->
<div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
<div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
<img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
</div>
<div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 2</h3>
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span class="text-sm text-gray-600 dark:text-gray-400">Date: April 15, 2023</span>
</div>
</div>
<!-- Event 3 -->
<div class="flex flex-col items-center md:w-1/3 relative">
<div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
<img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
</div>
<div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 3</h3>
<p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<span class="text-sm text-gray-600 dark:text-gray-400">Date: May 20, 2023</span>
</div>
</div>
</div>
</div>
</section>Composants associés
Composant de la chronologie du Bauhaus
Un composant de chronologie simple et réactif avec un design inspiré du Bauhaus utilisant des formes géométriques et des couleurs analogues primaires, adapté aux systèmes de réservation. Inclut la prise en charge du mode sombre.
Composant de chronologie
Un composant de chronologie réactif avec une palette de couleurs bonbon/doux, des transitions de dégradé et la prise en charge du mode sombre, adapté à la présentation de travaux ou de produits dans un portfolio. Comprend plusieurs événements chronologiques.
Composant de chronologie de médias sociaux - Glassmorphism
Un composant complexe et réactif de chronologie de médias sociaux avec un design glassmorphism avec une palette de couleurs analogue, la prise en charge du mode sombre et des éléments interactifs pour les interfaces de réseaux sociaux.