Composant de galerie de produits
Un composant de galerie de produits réactif conçu selon les principes de Material Design, avec des couleurs de terre, adapté aux tableaux de bord et prenant en charge le mode sombre.
HTML Code
<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>Composants associés
Composant de galerie de produits
Un composant complexe, inspiré du papier/de l’impression avec des couleurs complémentaires, conçu pour la consommation de contenu comme un blog, avec des détails riches, une réactivité et une prise en charge du mode sombre.
Composant de galerie de produits
Un composant de galerie de produits avec un design brutaliste, une palette de couleurs en niveaux de gris et une complexité modérée. Il est conçu pour un tableau de bord et est réactif avec la prise en charge du thème sombre.
Composant de galerie de produits
Un composant de galerie de produits réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux plates-formes de divertissement/médias.