Composant de galerie de produits
Un composant de galerie de produits avec un design brutaliste, une palette de couleurs en niveaux de gris et une complexité modérée. Il est conçu pour un tableau de bord et est réactif avec la prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-white pb-2">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="border-4 border-gray-900 dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
<h3 class="text-xl font-bold mb-2">Product Name 1</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the product goes here. It's a fantastic product that will change your life.</p>
<span class="text-2xl font-bold absolute top-4 right-4">$199.99</span>
<button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
<div class="border-4 border-gray-900 dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
<h3 class="text-xl font-bold mb-2">Product Name 2</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Another amazing product with features you won't believe. Get yours today!</p>
<span class="text-2xl font-bold absolute top-4 right-4">$249.00</span>
<button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
<div class="border-4 border-gray-900 dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
<h3 class="text-xl font-bold mb-2">Product Name 3</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">You won't want to miss out on this one. Limited stock available!</p>
<span class="text-2xl font-bold absolute top-4 right-4">$99.50</span>
<button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>Composants associés
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
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 réactif conçu pour le mode sombre, avec des images et des avatars avec Tailwind CSS.