Componente de carrito de compras
Un componente de carrito de compras de estilo retro / vintage con esquema de color en escala de grises, complejidad moderada y diseño receptivo con soporte para temas oscuros. Diseñado para sitios web empresariales/corporativos que utilizan Tailwind CSS. Sin JavaScript, solo HTML con clases Tailwind. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.
Código HTML
<div class="antialiased dark:bg-gray-900 dark:text-gray-200">
<div class="h-full bg-gray-100 dark:bg-gray-800 p-8">
<div class="mx-auto max-w-3xl">
<header class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Your Cart</h1>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Continue Shopping</a>
</header>
<div class="mt-8">
<ul class="space-y-4">
<li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<img src="https://picsum.photos/seed/product1/80/80" alt="Nike Air Force 1" class="h-20 w-20 rounded-lg object-cover mr-4">
<div class="flex-grow">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Nike Air Force 1</h3>
<p class="text-sm text-gray-500 dark:text-gray-300">Size: 10</p>
<p class="text-sm text-gray-500 dark:text-gray-300">Color: White</p>
<div class="mt-2 flex items-center justify-between">
<span class="text-base font-bold text-gray-900 dark:text-white">$120.00</span>
<div class="flex items-center">
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
<input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
</div>
</div>
</div>
<button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</li>
<li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<img src="https://picsum.photos/seed/product2/80/80" alt="Apple Watch Series 7" class="h-20 w-20 rounded-lg object-cover mr-4">
<div class="flex-grow">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Apple Watch Series 7</h3>
<p class="text-sm text-gray-500 dark:text-gray-300">Color: Space Gray</p>
<p class="text-sm text-gray-500 dark:text-gray-300">Band: Solo Loop</p>
<div class="mt-2 flex items-center justify-between">
<span class="text-base font-bold text-gray-900 dark:text-white">$399.00</span>
<div class="flex items-center">
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
<input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
</div>
</div>
</div>
<button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</li>
</ul>
</div>
<div class="mt-8 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<div class="flex items-center justify-between">
<p class="text-base font-semibold text-gray-900 dark:text-white">Subtotal</p>
<p class="text-base font-semibold text-gray-900 dark:text-white">$519.00</p>
</div>
<div class="mt-2 flex items-center justify-between">
<p class="text-base font-semibold text-gray-900 dark:text-white">Shipping</p>
<p class="text-base font-semibold text-gray-900 dark:text-white">Free</p>
</div>
<div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
<p class="text-xl font-bold text-gray-900 dark:text-white">Total</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">$519.00</p>
</div>
</div>
<div class="mt-8 flex justify-end">
<button type="button" class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">Proceed to Checkout</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de carrito de compras
Componente de carrito de compras con estilo de microinteracciones, efectos responsivos y soporte de temas oscuros.
Componente de carrito de compras
Un componente de carrito de compras simple y receptivo con diseño de neumorfismo y combinación de colores complementaria para soporte de temas oscuros.
Componente de carrito de compras
Un componente de carrito de compras simple y receptivo con soporte para temas oscuros, diseñado con Tailwind CSS siguiendo los principios de Material Design con un esquema de color en escala de grises. Utiliza picsum.photos para las imágenes de productos.