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.
Código HTML
<div class="flex flex-col items-center p-4">
<h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
<div class="flex flex-col space-y-8">
<div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
<div class="flex-shrink-0 mr-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
<img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
</div>
</div>
<div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
<div class="flex-shrink-0 mr-4">
<img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
<img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
</div>
</div>
<div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
<div class="flex-shrink-0 mr-4">
<img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
<img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
</div>
</div>
</div>
</div>Componentes relacionados
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 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 diseñado en estilo brutalismo con Tailwind CSS, compatible con temas oscuros y con imágenes y avatares de marcador de posición.