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.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 1</h3>
<p class="text-gray-300">Description of product 1 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by John Doe</span>
</div>
</div>
</div>
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 2</h3>
<p class="text-gray-300">Description of product 2 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by Jane Doe</span>
</div>
</div>
</div>
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 3</h3>
<p class="text-gray-300">Description of product 3 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by Alex Smith</span>
</div>
</div>
</div>
<!-- Additional Product Items can go here -->
</div>
</div>Composants associés
Galerie de produits Cyberpunk
Un composant de galerie de produits réactif avec une esthétique cyberpunk, avec des arrière-plans sombres, des couleurs d’accent vives (bleu électrique) et des éléments interactifs subtils, adapté à la présentation de produits ou d’un portfolio.
Galerie de produits Composant - Material Design
Un composant de galerie de produits inspiré de Material Design avec un design réactif, des effets de survol et la prise en charge du thème sombre. Utilise Tailwind CSS.
LuxeMonochromatiqueProductGallery
Un composant de galerie de produits simple et élégant avec une palette de couleurs monochromatiques, conçu pour les plateformes musicales/audio. Dispose d’une réactivité totale et d’une prise en charge du mode sombre.