Contenedor de comercio electrónico de diseño de materiales
Un componente contenedor de comercio electrónico receptivo con una cuadrícula de productos, un resumen del carrito de compras y compatibilidad con temas oscuros, diseñado utilizando los principios de Material Design y una combinación de colores en tonos tierra. Cuenta con múltiples elementos interactivos, que incluyen tarjetas de productos con imágenes, títulos, precios y botones "Agregar al carrito", así como un resumen del carrito de compras adhesivo que se actualiza con los artículos agregados. El diseño se ajusta a diferentes tamaños de pantalla y todos los elementos tienen estilos de modo oscuro definidos con los prefijos dark: de Tailwind CSS.
Código 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>Componentes relacionados
Contenedor de portafolio de Glassmorphism
Un componente contenedor de Glassmorphism receptivo con soporte para modo oscuro adaptado a un sitio web de portafolio que utiliza Tailwind CSS. Cuenta con un efecto de vidrio esmerilado, un esquema de color triádico, múltiples elementos interactivos y usa picsum.photos para imágenes y randomuser.me para avatares.
Componente contenedor neumórfico
Un componente contenedor neumórfico con capacidad de respuesta para mostrar trabajos o productos, diseñado con un esquema de color triádico y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Componente de contenedor
Un contenedor de panel simple y receptivo con microinteracciones atractivas y un tema oscuro, centrado en colores análogos.