Componente de contenedor
Un componente de contenedor diseñado en un estilo brutalista para el comercio electrónico, con un diseño responsivo con soporte para temas oscuros, utilizando Tailwind CSS.
Código HTML
<div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
<header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<footer class="text-center mt-4 text-gray-400">
<p>© 2023 E-commerce Store</p>
</footer>
</div>Componentes relacionados
Componente de contenedor de comercio electrónico
Componente contenedor de comercio electrónico Glassmorphism con esquema de color triádico y diseño complejo, incluida la compatibilidad con el modo oscuro
Componente de contenedor
Un contenedor de modo oscuro responsivo para el contenido del blog con un diseño simple en escala de grises.
Contenedor de redes sociales
Un componente contenedor responsivo con colores vibrantes, microinteracciones atractivas y compatibilidad con temas oscuros, adecuado para interfaces de redes sociales. Las características incluyen sutiles efectos de desplazamiento y un diseño limpio.