Composant de galerie de produits
Composant de galerie de produits réactif avec prise en charge du mode sombre
HTML Code
<div class="dark:bg-gray-900">
<div class="container mx-auto py-8 px-4">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-teal-500">$99.99</span>
<button class="bg-teal-500 text-white px-4 py-2 rounded hover:bg-teal-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-orange-500">$149.50</span>
<button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-purple-500">$199.00</span>
<button class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-pink-500">$75.50</span>
<button class="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product5/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 5</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-green-500">$120.00</span>
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product6/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 6</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-red-500">$250.80</span>
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">View Details</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Il s’agit d’un composant complexe et réactif de galerie de produits avec un style de conception Neumorphism et une palette de couleurs complémentaire, adapté aux plateformes musicales et audio. Comprend la prise en charge du mode sombre et des fonctionnalités telles que la liste des pistes, les informations sur l’artiste et les boutons de lecture.
Composant de galerie de produits
Une galerie de produits réactive avec un style rétro/vintage, avec une palette de couleurs complémentaires et conçue pour les sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre.
Composant de galerie de produits
Un composant simple de galerie de produits conçu avec des éléments 3D pour plus de profondeur, à l’aide d’une palette de couleurs triadique. Il est réactif et prend en charge le thème sombre, adapté à la présentation de travaux ou de produits.