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 avec un design skeuomorphe, une palette de couleurs monochromatiques et une prise en charge du thème sombre, construit avec Tailwind CSS. Il présente une mise en page simple adaptée aux blogs et à la consommation de contenu, imitant les éléments du monde réel avec des ombres et des dégradés subtils.
Composant de galerie de produits
Un composant de galerie de produits complexe et réactif conçu avec des micro-interactions subtiles, une palette de couleurs pastel et une prise en charge complète du mode sombre, adapté à un forum ou à une plate-forme communautaire. Comprend une sélection d’images interactive et des informations détaillées sur le produit.
Composant de galerie de produits
Un composant de galerie de produits réactif utilisant Tailwind CSS avec un style de conception Neumorphic, une palette de couleurs complémentaire et une mise en page complexe adaptée aux sites Web d’entreprise. Inclut la prise en charge du mode sombre et utilise des images de picsum.photos.