Componente Timeline
Un componente della timeline reattivo con supporto per la modalità oscura e microinterazioni tramite Tailwind CSS. Non è richiesto alcun JavaScript.
Codice HTML
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:grid grid-cols-12 text-gray-50">
<div class="flex md:contents">
<div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
<h3 class="font-semibold text-lg mb-1">Event Title 1</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</p>
</div>
</div>
<div class="flex md:contents">
<div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
<h3 class="font-semibold text-lg mb-1">Event Title 2</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</p>
</div>
</div>
<div class="flex md:contents">
<div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
<h3 class="font-semibold text-lg mb-1">Event Title 3</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</p>
</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 Timeline
Un semplice componente della timeline reattivo progettato in uno stile scheumorfico con una combinazione di colori in scala di grigi, adatto per siti Web aziendali/aziendali. È dotato di un supporto per il tema scuro e utilizza Tailwind CSS per lo stile.
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.