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
Componente de línea de tiempo
Un componente de línea de tiempo complejo y receptivo con efectos de neón/brillo y combinación de colores otoñales, adecuado para foros o plataformas comunitarias, incluida la compatibilidad con el modo oscuro.
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 de redes sociales - Glassmorphism
Un componente de línea de tiempo de redes sociales complejo y receptivo con diseño de morfismo de vidrio con esquema de color análogo, soporte de modo oscuro y elementos interactivos para interfaces de redes sociales.