Componente Columnas
Un componente de columna simple y receptivo para comercio electrónico, con influencias de Material Design, colores en escala de grises y compatibilidad con el modo oscuro.
Código HTML
কাপড়<div class="container mx-auto p-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-md rounded-lg"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum1/400/300" alt="Product Image 1"> <h3 class="text-lg font-semibold mb-2">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 1. This is a very appealing product.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$19.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum2/400/300" alt="Product Image 2"> <h3 class="text-lg font-semibold mb-2">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 2. Another great item for your needs.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$29.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum3/400/300" alt="Product Image 3"> <h3 class="text-lg font-semibold mb-2">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 3. You definitely want this one!</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$39.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> </div></div>Componentes relacionados
Componente Columnas Brutalistas
Un componente de columnas complejas con un diseño brutalista, con un esquema de color monocromático, adecuado para el blog o el consumo de contenido. El diseño presenta alto contraste, diseños inusuales y admite el modo oscuro.
Componente Columnas
Un componente de columnas responsivo diseñado para la presentación de carteras con soporte para modo oscuro, utilizando un esquema de color en escala de grises y Tailwind CSS.