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
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 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.
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.