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
Playful_Music_Timeline_Component
Un componente della timeline giocoso e divertente progettato per piattaforme musicali e audio, caratterizzato da toni gioiello luminosi, elementi arrotondati e un layout reattivo con supporto per la modalità oscura. Visualizza gli eventi audio o le tracce nel tempo.
Componente della sequenza temporale Art Déco
Un componente della timeline reattivo per eventi/conferenze, ispirato all'estetica Art Déco con una combinazione di colori viola/viola, che supporta la modalità oscura.
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.