Cronologia retrò
Un semplice componente della timeline retrò/vintage che utilizza Tailwind CSS, progettato per i portafogli. È dotato di un layout reattivo e supporto per la modalità oscura, utilizzando colori complementari.
Codice HTML
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2">
<div class="border-r-2 border-purple-500 dark:border-purple-700 pr-8">
<div class="mb-8 text-right">
<div class="text-sm text-gray-600 डार्क:text-gray-300">1985</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Started Coding</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Learned my first programming language on a vintage computer.</p>
</div>
<div class="mb-8 text-right">
<div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">First Website</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Launched my first personal website, very Geocities-esque.</p>
</div>
</div>
</div>
<div class="md:w-1/2 mt-8 md:mt-0">
<div class="border-l-2 border-teal-500 dark:border-teal-700 प्ल-8">
<div class="mb-8">
<div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Went Pro</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Started working as a professional web developer.</p>
</div>
<div class="mb-8">
<div class="text-sm text-gray-600 dark:text-gray-300">2020</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Modern Technologies</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Embracing modern frameworks and design trends, still with a nod to the classics.</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Timeline
Un componente della timeline reattivo con supporto per il tema scuro, creato con Tailwind CSS. Visualizza una serie di eventi con date, titoli e descrizioni, adatti per una dashboard.
Componente Timeline
Un componente della timeline reattivo con supporto per la modalità oscura e microinterazioni tramite Tailwind CSS. Non è richiesto alcun JavaScript.
Componente Timeline
Componente Timeline reattivo con design scheumorfico, combinazione di colori analoga, complessità moderata per siti Web di blog/contenuti con supporto per temi scuri. Non è necessario JavaScript, utilizza Tailwind CSS con supporto per la modalità oscura. Vengono utilizzate immagini da picsum.photos e avatar da randomuser.me.