Componente de carrito de compras
Un componente de carrito de compras receptivo diseñado con un estilo brutalista, con alto contraste y diseños inusuales. Es compatible con el tema oscuro con Tailwind CSS.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 dark:text-gray-300">$49.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex justify-between items-center mt-4">
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
<p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
</div>
<button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
</div>
<div class="flex items-center justify-center mt-4">
<p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
</div>
</div>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras de estilo neumórfico para comercio electrónico, con un esquema de color monocromático, elementos interactivos enriquecidos y soporte de temas oscuros mediante Tailwind CSS.
Componente de carrito de compras
Componente de carrito de compras Skeuomorphic con esquema de color pastel, responsivo y soporte de modo oscuro.
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.