Componente de carrito de compras
Componente de carrito de compras con diseño de materiales, combinación de colores monocromática y complejidad moderada para comercio electrónico. Diseño responsivo con soporte para temas oscuros usando Tailwind CSS.
Código HTML
<div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
<h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>
<div class="shadow-md rounded-lg overflow-hidden">
<!-- Cart Item -->
<div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
<p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
<div class="flex items-center mt-2">
<label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
<input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
</div>
</div>
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item -->
<div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
<p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
<div class="flex items-center mt-2">
<label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
<input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
</div>
</div>
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Total -->
<div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
<span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
<span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
</div>
</div>
<!-- Checkout Button -->
<div class="mt-4 text-right">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
Checkout
</button>
</div>
</div>Componentes relacionados
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.
Componente de carrito de compras 3D
Un componente de carrito de compras visualmente impactante con elementos de diseño 3D que crean profundidad y compromiso. Utiliza un esquema de color triádico (azul primario, rojo vivo y amarillo ámbar) para el interés visual. Esta compleja interfaz incluye listados de productos con imágenes, controles de cantidad, resúmenes de precios y efectos de desplazamiento que simulan el movimiento en 3D. Totalmente responsivo con soporte para temas oscuros. El componente está diseñado para un entorno de contenido/blog en el que los lectores pueden comprar productos recomendados mientras consumen contenido.
Componente de carrito de compras
Un componente de carrito de compras receptivo diseñado para una plataforma de comercio electrónico, con un estilo de diseño 3D y una combinación de colores pastel. Está equipado con múltiples elementos interactivos, como listados de productos, cantidades y un botón de pago, compatible con el tema oscuro.