Composant de galerie de produits
Une galerie de produits réactive avec un style rétro/vintage, avec une palette de couleurs complémentaires et conçue pour les sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre.
HTML Code
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$29.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$39.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$19.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$49.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$59.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$69.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</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 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 réactif conçu pour le mode sombre, avec des images et des avatars avec Tailwind CSS.