Composant de galerie de produits
Un composant de galerie de produits réactif simple conçu selon les principes de Material Design, avec des couleurs vives et une prise en charge du mode sombre, adapté à un tableau de bord. Ce composant utilise Tailwind CSS pour le style.
HTML Code
<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
</div>
</div>
</div>Composants associés
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 réactif de la galerie de produits conçu avec Glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou et une palette de couleurs complémentaire. Il comprend plusieurs éléments interactifs adaptés au commerce électronique avec prise en charge du mode sombre.
Composant de galerie de produits
Un composant de galerie de produits réactif conçu pour l’interface utilisateur en mode sombre, avec des couleurs complémentaires, adapté aux interfaces de réseau social.