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 complesso e reattivo con effetti neon/bagliore e combinazione di colori autunnali, adatto per forum o piattaforme della community, incluso il supporto della modalità scura.
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 della timeline complesso e reattivo progettato per le piattaforme didattiche, caratterizzato da un design pulito e minimalista incentrato sulla tipografia con toni della terra e supporto completo della modalità scura.