Componente de línea de tiempo retro/vintage
Un componente de línea de tiempo receptivo con diseño retro / vintage y soporte para modo oscuro.
Código HTML
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row">
<div class="mr-10 w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-purple-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 1</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">1985</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<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>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-pink-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 2</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<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>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row">
<div class="mr-10 w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-green-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 3</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">1995</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<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>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-yellow-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 4</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de la línea de tiempo del neumorfismo
Un componente de línea de tiempo receptivo diseñado con neumorfismo usando Tailwind CSS, con soporte para modo oscuro.
Componente de línea de tiempo
Un componente de línea de tiempo responsivo con elementos de diseño 3D, combinación de colores triádica, complejidad moderada y compatibilidad con temas oscuros, creado con Tailwind CSS para sitios web de cartera.