Composant de galerie de produits
Un composant de galerie de produits réactif conçu pour le mode sombre, avec des images et des avatars avec Tailwind CSS.
HTML Code
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 1</h3>
<p class="text-gray-400">$29.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 2</h3>
<p class="text-gray-400">$39.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 3</h3>
<p class="text-gray-400">$49.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 4</h3>
<p class="text-gray-400">$59.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 5</h3>
<p class="text-gray-400">$69.99</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl">Product Title 6</h3>
<p class="text-gray-400">$79.99</p>
</div>
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-semibold mb-2">Featured Seller</h2>
<div class="flex items-center bg-gray-800 p-3 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-gray-400">Best Seller</p>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif conçu dans un style brutaliste avec une palette de couleurs pastel adaptée aux médias sociaux. Il présente un contraste élevé, des éléments de design audacieux et est optimisé pour le mode sombre.
Composant de galerie de produits
Un composant de galerie de produits conçu dans le style Material Design avec une palette de couleurs triadique. Il propose des mises en page basées sur une grille, des animations réactives et prend en charge le thème sombre. La galerie comprend des images et des avatars et convient à un tableau de bord.
Composant de galerie de produits
Un composant de galerie de produits avec des micro-interactions.