Galerie de produits e-commerce
Un composant de galerie de produits minimaliste et réactif pour le commerce électronique, avec des tons océan/bleu, la prise en charge du mode sombre et l’affichage interactif des images.
HTML Code
<div class="bg-blue-50 dark:bg-gray-900 py-8 sm:py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center">
Featured Products
</h2>
<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 hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1015/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Wave Speaker</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Immersive sound experience</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$129.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1041/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Azure Comfort Cushion</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Soft & elegant seating</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$39.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1025/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Deep Sea Watch</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Water-resistant smart device</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$249.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1053/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sky Blue Backpack</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Lightweight & durable</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$79.50</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1063/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Coral Reef Artwork</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Vibrant wall decor</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$189.00</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1070/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Breeze Diffuser</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Relaxing aromatherapy</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$49.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1084/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Nautical Compass Mug</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">For your morning brew</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$18.75</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1018/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Aqua Fitness Bottle</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Stay hydrated in style</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$22.00</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Galerie d’images sépia minimaliste pour les réservations
Un composant de galerie d’images au design minimaliste et plat avec des tons chauds sépia/brun, adapté aux systèmes de réservation et de réservation. Il dispose d’un design réactif et d’une prise en charge du mode sombre.
Composant Galerie
Composant de galerie réactif conçu dans Material Design avec une palette de couleurs analogue à l’aide d’un tableau de bord.
Composant Galerie
Un composant de galerie réactif avec un design Glassmorphism, une palette de couleurs analogue, une mise en page complexe et la prise en charge du thème sombre pour le commerce électronique.