Componente del carrello della spesa
Un componente del carrello della spesa brutalista con supporto per la modalità oscura e design reattivo.
Codice 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>Componenti correlati
Componente del carrello della spesa
Un componente del carrello della spesa in stile retrò vintage con design reattivo e supporto per la modalità oscura, che utilizza Tailwind CSS e presenta immagini segnaposto e avatar.
Componente del carrello della spesa
Un componente del carrello della spesa in stile neumorfico per l'e-commerce, con una combinazione di colori monocromatica, ricchi elementi interattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente del carrello della spesa
Un componente del carrello della spesa semplice e reattivo con supporto per il tema scuro, con uno stile che utilizza Tailwind CSS seguendo i principi del Material Design con una combinazione di colori in scala di grigi. Utilizza picsum.photos per le immagini dei prodotti.