Componente Timeline
Componente Timeline con design 3D, effetti reattivi e supporto per temi scuri
Codice HTML
<div class="container mx-auto p-4">
<h1 class="text-4xl font-bold text-center mb-8 dark:text-white">Timeline</h1>
<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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 1</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">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>
</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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 2</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">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>
</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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 3</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">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>
</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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 4</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">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>
</div>
</div>
</div>
</div>Componenti correlati
Componente Timeline
Un componente timeline minimalista progettato per il consumo di blog e contenuti, con colori della terra e supporto per la modalità scura utilizzando Tailwind CSS.
Componente della sequenza temporale dei social media
Un componente della timeline semplice e reattivo per i social media, progettato secondo i principi del Material Design. Utilizza i toni della terra e include il supporto per la modalità oscura. Ogni elemento della timeline mostra un avatar utente, un nome, un titolo del post e un'immagine segnaposto, tipici dei feed dei social media.
Componente Timeline
Un componente della timeline reattivo con un design minimalista/piatto per l'e-commerce, che supporta la modalità oscura con una combinazione di colori analoga e più elementi interattivi.