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.
HTML Code
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Un composant de galerie de produits simple et réactif avec des tons de terre, optimisé pour le mode sombre et la consommation de contenu. Idéal pour les blogs ou les sites e-commerce affichant des articles.
Composant de galerie de produits
Une galerie de produits réactive avec une esthétique rétro/vintage, avec prise en charge du mode sombre. Il comprend des images et des avatars générés à partir de services d’espace réservé.
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.