Componente Timeline retrò/vintage
Un componente della timeline reattivo con un design retrò/vintage, colori vivaci e supporto per la modalità scura. Adatto per la presentazione di un portfolio.
Codice HTML
<div class="container mx-auto px-4 py-8">
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border" style="left: 50%;"></div>
<!-- right timeline -->
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-blue-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 1</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</div>
</div>
<!-- left timeline -->
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-purple-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 2</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</div>
</div>
<!-- right timeline -->
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-green-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-green-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 3</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</div>
</div>
<!-- left timeline -->
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-red-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 4</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</div>
</div>
</div>
</div>Componenti correlati
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
Un componente della timeline reattivo con supporto per il tema scuro, creato con Tailwind CSS. Visualizza una serie di eventi con date, titoli e descrizioni, adatti per una dashboard.
Componente Timeline
Un componente della sequenza temporale reattivo per le dashboard, con microinterazioni e una combinazione di colori pastello, con supporto per il tema scuro. Utilizza Tailwind CSS per lo stile e include immagini segnaposto da picsum.photos e avatar da randomuser.me.