Composant de galerie de produits
Un composant de galerie de produits réactif conçu pour les plateformes musicales et audio, avec une interface utilisateur sombre avec une palette de couleurs forêt/vert et une prise en charge complète du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-950 text-gray-100 p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-100">
<div class="max-w-7xl mx-auto py-8">
<h2 class="text-4xl sm:text-5xl font-extrabold text-emerald-400 mb-4 tracking-tight">Featured Albums</h2>
<p class="text-lg sm:text-xl text-gray-400 mb-12">Explore our curated collection of new releases and timeless classics.</p>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Product Card 1 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1043/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">The Serene Symphony</h3>
<p class="text-sm text-gray-400 mb-3">Artist Name</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$12.99</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Ambient</span>
<span>2023</span>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1044/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Echoes of the Forest</h3>
<p class="text-sm text-gray-400 mb-3">The Green Leaves</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$14.50</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Folk</span>
<span>2022</span>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1005/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Deep Woods Beats</h3>
<p class="text-sm text-gray-400 mb-3">DJ Mossy</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$11.75</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Electronic</span>
<span>2023</span>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Nature's Melody</h3>
<p class="text-sm text-gray-400 mb-3">Calm Rivers</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$9.99</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Classical</span>
<span>2021</span>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1040/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Undergrowth Rhythms</h3>
<p class="text-sm text-gray-400 mb-3">The Root Band</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$13.25</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Indie</span>
<span>2023</span>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Mystic Pond Sounds</h3>
<p class="text-sm text-gray-400 mb-3">Aqua Echoes</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$10.50</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Chillwave</span>
<span>2022</span>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif conçu dans un style brutaliste avec une palette de couleurs pastel adaptée aux médias sociaux. Il présente un contraste élevé, des éléments de design audacieux et est optimisé pour le mode sombre.
Brutalist_RealEstate_Product_Gallery
Il s’agit d’un composant complexe de galerie de produits de style brutaliste pour les annonces immobilières, avec des tons de bijoux, des couleurs saturées riches, un contraste élevé et la prise en charge du mode sombre. Conçu pour afficher les détails de la propriété avec plusieurs éléments interactifs.
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.