Material Design E-commerce Container
A responsive e-commerce container component with a product grid, shopping cart summary, and dark theme support, designed using Material Design principles and an Earth tones color scheme. It features multiple interactive elements, including product cards with images, titles, prices, and "Add to Cart" buttons, as well as a sticky shopping cart summary that updates with added items. The layout adjusts for different screen sizes, and all elements have dark mode styles defined with Tailwind CSS dark: prefixes.
HTML Code
<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>Related Components
Container Component
A simple, responsive dashboard container with engaging microinteractions and a dark theme, focusing on analogous colors.
Container Component
A skeuomorphic portfolio container component with a dark theme and responsive design, showcasing work and products with interactive elements.
Social Media Skeumorphic Container
A skeuomorphic social media container designed with a monochromatic scheme, featuring soft shadows, subtle gradients, and rounded edges to mimic real-world elements like buttons and cards, suitable for displaying user posts or profiles. Includes full responsiveness and dark mode support.