Contenitore per e-commerce di Material Design
Un componente contenitore di e-commerce reattivo con una griglia di prodotti, un riepilogo del carrello della spesa e il supporto per il tema scuro, progettato utilizzando i principi di Material Design e una combinazione di colori dei toni della Terra. Presenta più elementi interattivi, tra cui schede prodotto con immagini, titoli, prezzi e pulsanti "Aggiungi al carrello", nonché un riepilogo del carrello appiccicoso che si aggiorna con gli articoli aggiunti. Il layout si adatta alle diverse dimensioni dello schermo e tutti gli elementi hanno stili di modalità oscura definiti con i prefissi Tailwind CSS dark:.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 md:p-8 font-sans">
<!-- Sticky Shopping Cart Summary -->
<div class="sticky top-4 lg:top-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-8 z-10 border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Your Cart</h2>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<p class="text-sm">Items: <span class="font-medium">3</span></p>
<p class="text-sm">Total: <span class="font-medium">$250.00</span></p>
</div>
<button class="mt-4 w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Checkout</button>
</div>
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Earthen Vase</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted ceramic vase with a rustic finish, perfect for any home decor.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$45.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$60.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Terracotta Planter</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Classic terracotta planter, ideal for indoor and outdoor plants.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$25.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Woodland Sculpture</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Artisan-crafted wooden sculpture, bringing nature indoors.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$120.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$150.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Organic Cotton Towel</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Soft and absorbent towel made from sustainably sourced organic cotton.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$30.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product5/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Amber Glass Bottle Set</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Set of three reusable amber glass bottles with sleek dispensers.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product6/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Hemp Fabric Basket</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Eco-friendly storage basket made from durable hemp fabric.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$50.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$70.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
</div>
</div>Componenti correlati
Skeuomorphic_E-commerce_Container
Componente contenitore e-commerce scheumorfo nei toni pastello con supporto per la modalità scura
Componente contenitore
Un componente contenitore progettato in stile brutalista per l'e-commerce, caratterizzato da un layout reattivo con supporto per il tema scuro, utilizzando Tailwind CSS.
Contenitore di design dei materiali
Un componente contenitore in stile Material Design che utilizza Tailwind CSS, con design reattivo e supporto per temi scuri.