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.
Codice 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>Componenti correlati
Componente della linea temporale del neumorfismo
Un componente Timeline reattivo con stile Neumorfismo utilizzando Tailwind CSS, con supporto per la modalità scura.
Componente Timeline di gioco
Un componente della timeline semplice, vivace e reattivo con un design 3D sottile ottimizzato per i siti Web di giochi, con supporto per la modalità oscura.
Brutalist_Sepia_Timeline_Documentation
Un componente complesso della timeline in stile brutalista per la documentazione o i siti wiki, con toni seppia/marrone e piena reattività con supporto per la modalità scura. Progettato con un contrasto elevato e un'estetica grezza.