Cronología de la empresa Retro/Vintage
Componente de línea de tiempo retro / vintage receptivo con soporte de modo oscuro para sitios web comerciales / corporativos
Código HTML
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Company History</h2>
<div class="relative">
<!-- Vertical line -->
<div class="border-r-4 border-blue-500 absolute h-full top-0" style="left: 1.5rem"></div>
<!-- Timeline items -->
<div class="mb-8 flex justify-between items-center w-full right-auto left-0">
<div class="order-1 w-5/12"></div>
<div class="z-10 flex items-center order-1 bg-blue-800 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-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Founded</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Our journey began with a vision to innovate.</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-auto left-0 flex-row-reverse">
<div class="order-1 w-5/12"></div>
<div class="z-10 flex items-center order-1 bg-blue-800 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-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">First Product Launch</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Introducing our breakthrough product to the market.</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-auto left-0">
<div class="order-1 w-5/12"></div>
<div class="z-10 flex items-center order-1 bg-blue-800 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-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Expanding Horizons</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Opening new offices and reaching global customers.</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-auto left-0 flex-row-reverse">
<div class="order-1 w-5/12"></div>
<div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">4</h1>
</div>
<div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Future Ready</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Innovating for a better future.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Cronología de redes sociales en escala de grises
Un componente de línea de tiempo de redes sociales responsivo y listo para el modo oscuro construido con Tailwind CSS. Cuenta con un estricto esquema de color en escala de grises y postales complejas con avatares de usuario, contenido de publicaciones (texto e imágenes), estadísticas de participación y botones de acción. Diseñado para interfaces de redes sociales con múltiples elementos interactivos en cada publicación. El diseño admite fondos oscuros para reducir la fatiga visual. No se utiliza JavaScript.
Componente de línea de tiempo
Componente de línea de tiempo con diseño 3D, efectos responsivos y compatibilidad con temas oscuros
Componente de línea de tiempo
Un componente de línea de tiempo receptivo con un diseño minimalista / plano para comercio electrónico, que admite el modo oscuro con un esquema de color análogo y múltiples elementos interactivos.