Componente de carrito de compras
Un componente de carrito de compras brutalista con soporte para modo oscuro y diseño receptivo.
Código HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 border-4 border-black dark:border-white">
<h1 class="text-2xl font-bold mb-4 text-black dark:text-white">Shopping Cart</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border-2 border-black dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/item1/300/200" alt="Item 1" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 1</h2>
<p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 1.</p>
<p class="text-black dark:text-white font-bold">$19.99</p>
<button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
</div>
<div class="border-2 border-black dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/item2/300/200" alt="Item 2" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 2</h2>
<p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 2.</p>
<p class="text-black dark:text-white font-bold">$29.99</p>
<button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
</div>
<div class="border-2 border-black dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/item3/300/200" alt="Item 3" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 3</h2>
<p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 3.</p>
<p class="text-black dark:text-white font-bold">$39.99</p>
<button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
</div>
</div>
<div class="mt-8 border-t-4 border-black dark:border-white pt-4 flex justify-between items-center">
<h2 class="text-xl font-bold text-black dark:text-white">Total:</h2>
<p class="text-xl font-bold text-black dark:text-white">$89.97</p>
</div>
<div class="mt-4 flex justify-end">
<button class="p-4 bg-black text-white dark:bg-white dark:text-black border-4 border-black dark:border-white text-xl font-bold">Checkout</button>
</div>
</div>Componentes relacionados
Componente de carrito de compras
Componente de carrito de compras con diseño brutalista, efectos responsivos y soporte para temas oscuros.
Carrito de compras neumórfico
Un componente de carro de la compra neumórfico que utiliza un esquema de color triádico. Tiene una complejidad moderada, diseñado para sitios web comerciales / corporativos. El componente es responsivo e incluye soporte para el modo oscuro usando el prefijo dark: de Tailwind. Incluye marcadores de posición para artículos con cantidad y precio, un subtotal y un botón de pago. Utiliza picsum.photos para las imágenes de productos.
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.