Componente Timeline
Un componente della timeline reattivo con elementi di progettazione 3D, combinazione di colori triadica, complessità moderata e supporto per temi scuri, costruito con Tailwind CSS per siti web di portfolio.
Codice HTML
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center mb-8 dark:text-white">My Timeline</h2>
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="right: 50%; border: 2px solid #000; border-radius: 1%;"></div>
<div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="left: 50%; border: 2px solid #000; border-radius: 1%;"></div>
<!-- Timeline Item -->
<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-500 shadow-xl w-8 h-8 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">1</h1>
</div>
<div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-blue-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Alpha</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
</div>
</div>
<!-- Timeline Item -->
<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-yellow-500 shadow-xl w-8 h-8 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">2</h1>
</div>
<div class="order-1 bg-yellow-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-yellow-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Beta</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
</div>
</div>
<!-- Timeline Item -->
<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-red-500 shadow-xl w-8 h-8 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">3</h1>
</div>
<div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-red-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Gamma</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
</div>
</div>
</div>
</div>Componenti correlati
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.
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 una combinazione di colori caramelle/dolci, transizioni sfumate e supporto per la modalità scura, adatto per mostrare lavori o prodotti in un portfolio. Presenta più eventi della sequenza temporale.