Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo con microinteracciones, que utiliza un esquema de color en escala de grises y admite el modo oscuro. Ideal para fines de blog o consumo de contenido.
Código HTML
<div class="flex flex-wrap justify-center p-4">
<div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
<div class="bg-white dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
<div class="text-gray-800 dark:text-white">
<p class="text-sm font-medium">Author Name</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
</div>
</div>
<div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
<div class="bg-white dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
<div class="text-gray-800 dark:text-white">
<p class="text-sm font-medium">Author Name</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo diseñado en un estilo minimalista con una combinación de colores pastel, adecuado para sitios web comerciales o corporativos, e incluye soporte para modo oscuro.
Componente Tarjetas de producto
Un componente de tarjetas de producto complejo y receptivo para plataformas de entretenimiento/medios, con un diseño orgánico/inspirado en la naturaleza que utiliza una paleta de colores bosque/verde. Incluye soporte para modo oscuro y elementos interactivos.
Ficha de producto Skeuomórfico
Un componente de tarjeta de producto skeuomórfico para un tablero, con estilo en escala de grises, complejidad media, responsivo con modo oscuro.