Componente Timeline
Un componente della timeline reattivo con uno stile di progettazione 3D, che utilizza una combinazione di colori monocromatica, progettato per mostrare il lavoro o i prodotti di un portfolio. Include più elementi interattivi e supporta un tema scuro.
Codice HTML
<div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 py-10">
<div class="relative w-full max-w-4xl">
<div class="border-l-4 border-indigo-600 dark:border-indigo-300">
<div class="mb-8 ml-6">
<div class="flex items-center">
<div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
</div>
<div class="ml-4">
<p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 1</p>
<p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
<img src="https://picsum.photos/500/300?random=1" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
</div>
</div>
</div>
<div class="mb-8 ml-6">
<div class="flex items-center">
<div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
</div>
<div class="ml-4">
<p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 2</p>
<p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
<img src="https://picsum.photos/500/300?random=2" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
</div>
</div>
</div>
<div class="mb-8 ml-6">
<div class="flex items-center">
<div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
</div>
<div class="ml-4">
<p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 3</p>
<p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
<img src="https://picsum.photos/500/300?random=3" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente della linea temporale di Glassmorphism
Un componente Timeline reattivo con stile glassmorphism con una combinazione di colori triadica. Include elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, adatti per il consumo di blog e contenuti, con supporto per la modalità scura.
Cronologia retrò
Un semplice componente della timeline retrò/vintage che utilizza Tailwind CSS, progettato per i portafogli. È dotato di un layout reattivo e supporto per la modalità oscura, utilizzando colori complementari.
Componente Timeline
Componente Timeline reattivo con design scheumorfico, combinazione di colori analoga, complessità moderata per siti Web di blog/contenuti con supporto per temi scuri. Non è necessario JavaScript, utilizza Tailwind CSS con supporto per la modalità oscura. Vengono utilizzate immagini da picsum.photos e avatar da randomuser.me.