Componente de línea de tiempo
Un componente de línea de tiempo responsivo con elementos de diseño 3D, combinación de colores triádica, complejidad moderada y compatibilidad con temas oscuros, creado con Tailwind CSS para sitios web de cartera.
Código 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>Componentes relacionados
Componente de línea de tiempo de juegos
Un componente de línea de tiempo simple, vibrante y receptivo con un sutil diseño 3D optimizado para sitios web de juegos, con soporte para modo oscuro.
Cyberpunk_Timeline_Dating_Social_Component
Un componente de línea de tiempo receptivo con una estética cyberpunk para plataformas sociales y de citas. Cuenta con fondos oscuros, cálidos acentos de neón y diseño adaptable para escritorio, tableta y móvil, con soporte completo para el modo oscuro.
Componente de línea de tiempo
Un componente de línea de tiempo receptivo para paneles, con microinteracciones y una combinación de colores pastel, con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.