Componente de línea de tiempo
Componente de línea de tiempo receptivo con diseño esqueuomórfico, combinación de colores análoga, complejidad moderada para sitios web de blogs/contenido con soporte de tema oscuro. No se necesita JavaScript, usa Tailwind CSS con soporte para modo oscuro. Se utilizan imágenes de picsum.photos y avatares de randomuser.me.
Código HTML
<section class="relative antialiased bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<div class="container mx-auto px-4 py-8 relative">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
<div class="relative">
<img src="https://picsum.photos/400/300?random=1" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Timeline Title</h2>
<p class="text-sm">A brief description of this timeline event.</p>
</div>
</div>
</div>
<div class="md:flex-grow w-full md:w-2/3 px-6">
<h3 class="text-2xl font-bold mb-4">Event Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<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>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-grow w-full md:w-2/3 px-6 order-2 md:order-1">
<h3 class="text-2xl font-bold mb-4">Event Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-green-500">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on February 15, 2023</p>
</div>
</div>
<div class="border-l-4 border-green-500 pl-4">
<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 class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0 order-1 md:order-2">
<div class="relative">
<img src="https://picsum.photos/400/300?random=2" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Another Title</h2>
<p class="text-sm">Related image description.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
<div class="relative">
<img src="https://picsum.photos/400/300?random=3" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Final Event</h2>
<p class="text-sm">Concluding event details.</p>
</div>
</div>
</div>
<div class="md:flex-grow w-full md:w-2/3 px-6">
<h3 class="text-2xl font-bold mb-4">Event Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-blue-500">
<div>
<p class="font-semibold">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on March 10, 2023</p>
</div>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<p class="text-gray-700 dark:text-gray-300">Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</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 retro/vintage
Un componente de línea de tiempo receptivo con un diseño retro/vintage, colores vibrantes y compatibilidad con el modo oscuro. Adecuado para exhibir un portafolio.
Componente de línea de tiempo
Un componente simple de línea de tiempo retro / vintage diseñado para exhibir trabajos o productos con una estética nostálgica de los años 80 / 90, utilizando un esquema de color análogo para el soporte del modo oscuro.