Music_Cards_Component
Un composant de carte audio/musicale réactif avec des dégradés de tons riches et des transitions fluides, avec prise en charge du mode sombre. Mise en page simple pour l’affichage d’un album ou d’une piste.
HTML Code
<div class="p-4 sm:p-8 bg-gradient-to-br from-purple-950 via-indigo-950 to-black dark:from-gray-950 dark:via-blue-950 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full max-w-7xl">
<!-- Card 1 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-fuchsia-700 via-purple-700 to-indigo-700 dark:from-fuchsia-900 dark:via-purple-900 dark:to-indigo-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music1/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Groovy Rhythms</h3>
<p class="text-lg text-indigo-100 mb-4">Artist Name</p>
<button class="px-6 py-3 rounded-full bg-white text-indigo-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-indigo-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
<!-- Card 2 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-purple-700 via-blue-700 to-cyan-700 dark:from-purple-900 dark:via-blue-900 dark:to-cyan-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music2/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Electric Dreams</h3>
<p class="text-lg text-blue-100 mb-4">Another Artist</p>
<button class="px-6 py-3 rounded-full bg-white text-blue-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-blue-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
<!-- Card 3 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-emerald-700 via-teal-700 to-sky-700 dark:from-emerald-900 dark:via-teal-900 dark:to-sky-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music3/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Jazzy Beats</h3>
<p class="text-lg text-teal-100 mb-4">New Age Jazz Ensemble</p>
<button class="px-6 py-3 rounded-full bg-white text-teal-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-teal-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
<!-- Card 4 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-red-700 via-pink-700 to-purple-700 dark:from-red-900 dark:via-pink-900 dark:to-purple-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music4/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Melody Flow</h3>
<p class="text-lg text-pink-100 mb-4">The Sound Weavers</p>
<button class="px-6 py-3 rounded-full bg-white text-red-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-red-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
</div>
</div>Composants associés
Composant Cartes
Un composant de carte de portefeuille réactif avec un style de conception brutaliste, utilisant une palette de couleurs pastel et une complexité modérée avec des fonctionnalités interactives. Cette carte présente des travaux ou des produits et prend en charge le mode sombre.
Neon_Glow_Farming_Cards
Un ensemble complexe de cartes réactives pour les sites Web agricoles, avec des effets de néon/lueur avec une palette de couleurs coucher de soleil/chaudes, y compris la prise en charge du mode sombre.
Cartes sociales en mode sombre
Un composant de carte réactif conçu pour le mode sombre avec des tons de terre, conçu pour les interfaces de médias sociaux.