Componente de línea de tiempo
Un componente de línea de tiempo receptivo con elementos de diseño 3D, combinación de colores en tonos tierra y compatibilidad con el modo oscuro. Adecuado para carteras.
Código HTML
<div class="container mx-auto py-12">
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 absolute top-0 left-1/2 w-0.5 h-full bg-gray-700 transform -translate-x-1/2 dark:bg-gray-300"></div>
<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="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet messy, consectetur adipiscing elit. Sed do eiusmod tempor messy incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-left">
<p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<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="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-left">
<p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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
Un componente de línea de tiempo minimalista diseñado para el blog y el consumo de contenido, con colores en tonos tierra y soporte para modo oscuro usando Tailwind CSS.