Componente Timeline
Un componente della timeline reattivo con elementi di progettazione 3D, combinazione di colori dei toni della terra e supporto per la modalità scura. Adatto per portafogli.
Codice HTML
<div class="container mx-auto py-12">
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 absolute top-0 left-1/2 w-0.5 h-full bg-gray-700 transform -translate-x-1/2 dark:bg-gray-300"></div>
<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="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet messy, consectetur adipiscing elit. Sed do eiusmod tempor messy incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-left">
<p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<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="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-left">
<p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>Componenti correlati
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.
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 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.