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 de galerie de produits avec des micro-interactions.
Composant de galerie de produits
Un composant de galerie de produits réactif avec le style de conception Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et la prise en charge du thème sombre. Il présente des images de produits et des avatars d’utilisateurs.
Composant de galerie de produits
Un composant de galerie de produits réactif conçu avec un style de neumorphisme et une palette de couleurs triadique, adapté à la présentation de travaux ou de produits, avec prise en charge du thème sombre.