Componente de línea de tiempo de Glassmorphism
Un componente de línea de tiempo responsivo con un estilo de morfismo de vidrio con un esquema de color triádico. Incluye elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, adecuados para el blog y el consumo de contenido, con soporte para modo oscuro.
Código HTML
<div class="bg-gray-50 dark:bg-gray-900 flex justify-center py-10">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl w-full backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Timeline</h2>
<div class="relative mb-4">
<div class="flex justify-between items-center mb-4">
<div class="w-1/2 flex items-center">
<div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
<img src="https://picsum.photos/40/40" alt="" class="object-cover">
</div>
<div class="ml-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Event 1</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Date 1</p>
</div>
</div>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1/2 text-right">
<p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 1.</p>
</div>
</div>
</div>
<div class="relative mb-4">
<div class="flex justify-between items-center mb-4">
<div class="w-1/2 flex items-center">
<div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
<img src="https://picsum.photos/40/40" alt="" class="object-cover">
</div>
<div class="ml-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Event 2</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Date 2</p>
</div>
</div>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1/2 text-right">
<p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 2.</p>
</div>
</div>
</div>
<div class="relative mb-4">
<div class="flex justify-between items-center mb-4">
<div class="w-1/2 flex items-center">
<div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
<img src="https://picsum.photos/40/40" alt="" class="object-cover">
</div>
<div class="ml-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Event 3</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Date 3</p>
</div>
</div>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
<div class="w-1/2 text-right">
<p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 3.</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de línea de tiempo
Un componente de línea de tiempo responsivo simple diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises, adecuado para sitios web comerciales / corporativos. Cuenta con un soporte de tema oscuro y utiliza Tailwind CSS para el estilo.
Componente de línea de tiempo
Un componente de línea de tiempo responsivo con soporte para temas oscuros, construido con Tailwind CSS. Muestra una serie de eventos con fechas, títulos y descripciones, adecuados para un panel.