Composant de galerie de produits
Un composant de galerie de produits réactif présentant des articles avec des micro-interactions attrayantes et un accent sur les tons de terre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 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-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
<div>
<strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
<p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
</div>
</div>
</div>
</div>Composants associés
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.
Composant de galerie de produits
Composant de galerie de produits basé sur les principes de conception matérielle, avec un design réactif et une prise en charge du thème sombre. Comprend des images de remplacement.
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.