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
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.
Contenedor esqueumórfico para redes sociales
Un contenedor de redes sociales esqueuomórfico diseñado con un esquema monocromático, con sombras suaves, degradados sutiles y bordes redondeados para imitar elementos del mundo real como botones y tarjetas, adecuados para mostrar publicaciones o perfiles de usuarios. Incluye capacidad de respuesta completa y soporte para modo oscuro.
Neon_Glow_Food_Container
Un componente contenedor simple y receptivo para sitios web de alimentos/restaurantes con vibrantes efectos de neón/brillo y compatibilidad con el modo oscuro.