Componente de línea de tiempo
Un componente de línea de tiempo de diseño plano minimalista para mostrar trabajos o productos en un portafolio, con colores vibrantes y soporte para temas oscuros.
Código HTML
<div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-blue-500 dark:text-blue-400">January 2022</span>
</div>
</div>
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-red-500 dark:text-red-400">March 2022</span>
</div>
</div>
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-green-500 dark:text-green-400">May 2022</span>
</div>
</div>
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
<div class="ml-4">
<h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
<span class="text-purple-500 dark:text-purple-400">August 2022</span>
</div>
</div>
</div>Componentes relacionados
Cronología retro
Un componente de línea de tiempo simple, retro/vintage que usa Tailwind CSS, diseñado para portafolios. Cuenta con un diseño responsivo y soporte para modo oscuro, utilizando colores complementarios.
Componente de línea de tiempo
Un componente de línea de tiempo interactivo con un estilo de diseño 3D, que utiliza una combinación de colores monocromática, diseñado para mostrar el trabajo o los productos de una cartera. Incluye múltiples elementos interactivos y admite un tema oscuro.
Componente de línea de tiempo skeuomórfico
Un componente de línea de tiempo skeuomórfico con efectos responsivos y soporte para temas oscuros, creado con Tailwind CSS. No se necesita JavaScript, solo HTML y CSS.