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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Our Journey</h2>
<div class="relative mb-12">
<div class="absolute w-1 bg-gray-300 dark:bg-gray-600 h-full left-1/2 transform -translate-x-1/2"></div>
<div class="flex items-start mb-8">
<div class="bg-green-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 1: Browse Products</h3>
<p class="text-gray-700 dark:text-gray-400">Explore our wide range of products and find what you love.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">January 2023</span>
</div>
</div>
<div class="flex items-start mb-8">
<div class="bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 2: Add to Cart</h3>
<p class="text-gray-700 dark:text-gray-400">Add your favorite items to your shopping cart.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">February 2023</span>
</div>
</div>
<div class="flex items-start mb-8">
<div class="bg-orange-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 3: Checkout</h3>
<p class="text-gray-700 dark:text-gray-400">Proceed to checkout and complete your purchase.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">March 2023</span>
</div>
</div>
<div class="flex items-start mb-8">
<div class="bg-red-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 w-full">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 4: Order Confirmation</h3>
<p class="text-gray-700 dark:text-gray-400">Receive confirmation of your order via email.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">April 2023</span>
</div>
</div>
</div>
<a href="#" class="inline-block bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800">Shop Now</a>
</div>Componentes relacionados
Componente de línea de tiempo
Un componente de línea de tiempo responsivo con soporte de modo oscuro y microinteracciones usando Tailwind CSS. No se requiere JavaScript.
Componente de línea de tiempo skeuomórfico
Un componente de línea de tiempo skeuomórfico con efectos responsivos y soporte para temas oscuros, creado con Tailwind CSS. No se necesita JavaScript, solo HTML y CSS.
Componente de línea de tiempo
Un componente de línea de tiempo responsivo simple diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises, adecuado para sitios web comerciales / corporativos. Cuenta con un soporte de tema oscuro y utiliza Tailwind CSS para el estilo.