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 pour le mode sombre, avec des images et des avatars avec Tailwind CSS.
Composant de galerie de produits
Composant de galerie de produits réactif avec prise en charge du mode sombre
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.