Componente Tarjetas de producto
Componente de tarjetas de producto skeuomórficas para tablero con diseño receptivo y soporte de tema oscuro.
Código HTML
<!-- Product Cards Component -->
<div class="p-10 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$199.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$299.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$399.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo diseñado en estilo Material Design, con una combinación de colores en escala de grises. Incluye una imagen, un título, una descripción y un botón con soporte para el modo oscuro mediante Tailwind CSS.
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo con diseño de Glassmorphism, combinación de colores en escala de grises y compatibilidad con temas oscuros. Incluye múltiples elementos interactivos adecuados para las interfaces de redes sociales, como la imagen del producto, el título, la descripción, el precio y el botón Agregar al carrito. El diseño utiliza elementos translúcidos similares al vidrio escarchado con efectos de desenfoque. No se utiliza Javascript, solo HTML con clases CSS de Tailwind.
Componente Tarjetas de producto
Componente de tarjeta de producto con estilo brutalista, combinación de colores monocromática, nivel de complejidad complejo para fines de comercio electrónico.