Componente Tarjetas de producto
Un componente simple de tarjeta de producto de comercio electrónico diseñado en estilo Material Design utilizando un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.
Código HTML
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
<div class="p-4">
<h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Fichas de producto Componente para redes sociales con un esquema de color triádico oscuro y complejidad moderada. Utiliza Tailwind CSS para un diseño responsivo con soporte para modo oscuro, e incluye marcadores de posición para imágenes y avatares.
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.
Tarjetas de productos Art Deco Candy
Un componente de tarjetas de producto receptivo con un diseño inspirado en el Art Deco y una alegre combinación de colores dulces, adecuado para sistemas de reserva y reservas. Incluye soporte para modo oscuro.