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 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 avec le style de conception Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et la prise en charge du thème sombre. Il présente des images de produits et des avatars d’utilisateurs.
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.