Cronología retro
Un componente de línea de tiempo simple, retro/vintage que usa Tailwind CSS, diseñado para portafolios. Cuenta con un diseño responsivo y soporte para modo oscuro, utilizando colores complementarios.
Código 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>Componentes relacionados
Componente de línea de tiempo Art Deco
Un componente de línea de tiempo receptivo para eventos/conferencias, inspirado en la estética Art Deco con un esquema de color púrpura/violeta, compatible con el modo oscuro.
Componente de línea de tiempo de redes sociales - Glassmorphism
Un componente de línea de tiempo de redes sociales complejo y receptivo con diseño de morfismo de vidrio con esquema de color análogo, soporte de modo oscuro y elementos interactivos para interfaces de redes sociales.
Componente de línea de tiempo de Glassmorphism
Un componente de línea de tiempo responsivo con un estilo de morfismo de vidrio con un esquema de color triádico. Incluye elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, adecuados para el blog y el consumo de contenido, con soporte para modo oscuro.