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
ProductGalleryComponent
Componente de la galería de productos con diseño brutalista, responsivo y soporte para modo oscuro.
Componente de la galería de productos
Un componente de galería de productos responsivo diseñado para el modo oscuro, con imágenes y avatares con Tailwind CSS.
Componente de la galería de productos
Un componente de galería de productos complejo y receptivo con una estética de diseño 3D y una combinación de colores sepia/marrón, adecuado para aplicaciones de tecnología/SaaS. Incluye múltiples elementos interactivos y soporte para el modo oscuro.