Componente de carrito de compras
Un componente de carrito de compras complejo, limpio y confiable diseñado para productos de moda y belleza, con ricos colores otoñales, capacidad de respuesta total y compatibilidad con el modo oscuro.
Código HTML
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden lg:flex lg:flex-row-reverse">
<!-- Order Summary / Cart Totals -->
<div class="lg:w-1/3 p-6 sm:p-8 bg-orange-50 dark:bg-gray-700 border-b lg:border-b-0 lg:border-l border-orange-100 dark:border-gray-600">
<h2 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-6 sm:mb-8">Order Summary</h2>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<span>Subtotal</span>
<span>$385.00</span>
</div>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<span>Shipping & Handling</span>
<span>$15.00</span>
</div>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<span>Taxes (5%)</span>
<span>$19.25</span>
</div>
</div>
<div class="border-t border-orange-200 dark:border-gray-600 pt-4 flex justify-between items-center text-xl font-semibold text-orange-900 dark:text-orange-100">
<span>Order Total</span>
<span>$419.25</span>
</div>
<div class="mt-8">
<label for="promo_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
<div class="flex">
<input type="text" id="promo_code" class="flex-grow p-3 border border-orange-300 dark:border-gray-600 rounded-l-md focus:ring-orange-500 focus:border-orange-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 outline-none" placeholder="Enter code">
<button class="px-4 py-3 bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-r-md transition duration-200 ease-in-out">
Apply
</button>
</div>
</div>
<button class="mt-8 w-full bg-orange-800 hover:bg-orange-900 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-bold py-3 px-6 rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
Proceed to Checkout
</button>
<p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-400">
Secure payment via SSL.
</p>
</div>
<!-- Cart Items -->
<div class="lg:w-2/3 p-6 sm:p-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 sm:mb-8">Your Shopping Cart (<span id="item_count">2</span> items)</h2>
<div class="space-y-6">
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/60/300/300" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow mt-4 sm:mt-0">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Elegant Silk Scarf</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Burgundy Red, Size: One Size</p>
<div class="flex items-center gap-4">
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
<span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
</div>
<p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$120.00</p>
</div>
<div class="flex items-center mt-3 text-sm">
<button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
<button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
</div>
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/166/300/300" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow mt-4 sm:mt-0">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Artisan Leather Handbag</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Autumn Brown, Size: Medium</p>
<div class="flex items-center gap-4">
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
<span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
</div>
<p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$265.00</p>
</div>
<div class="flex items-center mt-3 text-sm">
<button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
<button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
</div>
</div>
</div>
</div>
<div class="mt-8 flex flex-col sm:flex-row justify-between items-center">
<a href="#" class="text-orange-700 dark:text-orange-400 hover:underline flex items-center mb-4 sm:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
Continue Shopping
</a>
<button class="px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
Clear Cart
</button>
</div>
</div>
</div>
</div>Componentes relacionados
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.
RetroShoppingcartComponent
Un componente de carrito de compras receptivo con una estética retro / vintage, combinación de colores triádica y soporte para modo oscuro, adecuado para una cartera.
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.