Componente de la galería de productos
Un componente de galería de productos receptivo diseñado con los principios de Material Design, con colores en tonos tierra, adecuado para tableros y compatible con el modo oscuro.
Código HTML
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h2>
<p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
<div class="flex items-center mt-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
</div>
<div class="ml-3">
<span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h2>
<p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
<div class="flex items-center mt-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
</div>
<div class="ml-3">
<span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/202" alt="Product Image" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h2>
<p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
<div class="flex items-center mt-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
</div>
<div class="ml-3">
<span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado para plataformas de música y audio, con una interfaz de usuario oscura con una paleta de colores bosque/verde y compatibilidad total con el modo oscuro.
Componente de la galería de productos
Un componente de galería de productos complejo y receptivo diseñado con microinteracciones sutiles, combinación de colores pastel y compatibilidad total con el modo oscuro, adecuado para un foro o una plataforma comunitaria. Cuenta con selección interactiva de imágenes e información detallada del producto.
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado para la interfaz de usuario del modo oscuro, con colores complementarios, adecuado para interfaces de redes sociales.