Componente Timeline
Un componente della timeline dal design piatto minimalista per mostrare lavori o prodotti in un portfolio, con colori vivaci e supporto per temi scuri.
Codice 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>Componenti correlati
Componente Timeline
Un componente Timeline reattivo progettato in stile Brutalismo con CSS Tailwind, che supporta il tema scuro e presenta immagini segnaposto e avatar.
Componente Timeline
Un semplice componente della timeline retrò/vintage progettato per mostrare lavori o prodotti con un'estetica nostalgica degli anni '80/'90, utilizzando una combinazione di colori analoga per il supporto della modalità scura.
Cronologia dell'azienda retrò/vintage
Componente Timeline reattivo retrò/vintage con supporto per la modalità oscura per siti Web aziendali/aziendali