Composant de galerie de produits
Un composant de galerie de produits réactif avec une esthétique de conception matérielle, avec une mise en page basée sur une grille et des éléments interactifs adaptés à la présentation de produits ou d’un portefeuille. Inclut la prise en charge du mode sombre et utilise un schéma de couleurs analogue.
HTML Code
<div class="container mx-auto p-4"">
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 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-800 dark:text-white"">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">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-800 dark:text-white"">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">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-800 dark:text-white"">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">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-800 dark:text-white"">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-3"">
<span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant de galerie de produits
Composant de galerie de produits réactif avec prise en charge du mode sombre
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 de galerie de produits réactif présentant des articles avec des micro-interactions attrayantes et un accent sur les tons de terre.