Componente Tarjetas de producto
Un componente de tarjetas de producto responsivo diseñado utilizando los principios de Material Design con Tailwind CSS. Es compatible con el modo oscuro y presenta sombras y diseños basados en cuadrículas.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Product Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=3" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con diseño 3D, combinación de colores análoga y compatibilidad con modo oscuro, diseñado para interfaces de redes sociales.
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.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con microinteracciones, diseño monocromático y compatibilidad con temas oscuros.