Componente Columnas
Un componente de columnas responsivo diseñado en un estilo brutalista con tonos tierra, adaptado para el comercio electrónico, con complejidad media y soporte para temas oscuros.
Código HTML
<div class="container mx-auto p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 1</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 1. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$19.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 2</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 2. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$29.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 3</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 3. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$39.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 4</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 4. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$49.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 5</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 5. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$59.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 6</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 6. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$69.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Columnas
Un componente de columnas minimalista con un esquema de color en escala de grises diseñado para interfaces de redes sociales. Cuenta con un diseño responsivo con soporte para temas oscuros.
Componente Columnas
Un componente de columnas diseñado con el estilo Glassmorphism, colores vibrantes y un diseño simple, adecuado para un tablero.
Componente Columnas
Un componente de columnas responsivo diseñado para el modo oscuro con Tailwind CSS, con marcadores de posición de avatar e imagen.