Componente de línea de tiempo con glassmorphism
Componente de línea de tiempo con estilo Glassmorphism, responsivo y con soporte de tema oscuro
Código HTML
<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>Componentes relacionados
Cronología de redes sociales en escala de grises
Un componente de línea de tiempo de redes sociales responsivo y listo para el modo oscuro construido con Tailwind CSS. Cuenta con un estricto esquema de color en escala de grises y postales complejas con avatares de usuario, contenido de publicaciones (texto e imágenes), estadísticas de participación y botones de acción. Diseñado para interfaces de redes sociales con múltiples elementos interactivos en cada publicación. El diseño admite fondos oscuros para reducir la fatiga visual. No se utiliza JavaScript.
Componente de línea de tiempo
Un componente de línea de tiempo receptivo con un diseño minimalista / plano para comercio electrónico, que admite el modo oscuro con un esquema de color análogo y múltiples elementos interactivos.
Componente de línea de tiempo
Un componente de línea de tiempo receptivo con elementos de diseño 3D, combinación de colores en tonos tierra y compatibilidad con el modo oscuro. Adecuado para carteras.