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 Timeline con Glassmorphism
Componente Timeline con stile Glassmorphism, responsive e con supporto per temi scuri
Timeline dei social media in scala di grigi
Un componente della timeline dei social media reattivo e pronto per la modalità oscura costruito con Tailwind CSS. È dotato di una rigorosa combinazione di colori in scala di grigi e di complesse cartoline con avatar dell'utente, contenuti dei post (testo e immagini), statistiche di coinvolgimento e pulsanti di azione. Progettato per le interfacce di social networking con più elementi interattivi su ogni post. Il design supporta sfondi scuri per ridurre l'affaticamento degli occhi. Non viene utilizzato alcun JavaScript.
Componente della timeline dei social media - Glassmorphism
Un componente complesso e reattivo della timeline dei social media con design glassmorphism con combinazione di colori analoga, supporto per la modalità oscura ed elementi interattivi per le interfacce di social networking.