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
Carte de conception matérielle
Composant de carte de style Material Design avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Caractéristiques repères visuels d’élévation et d’ondulation.
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.
Carte e-commerce
Composant de carte de commerce électronique réactif avec prise en charge du mode sombre à l’aide des principes Tailwind CSS et Material Design. Dispose d’une palette de couleurs vives avec une complexité modérée, y compris des éléments interactifs tels que des boutons et des effets de survol. Utilise une mise en page basée sur une grille et intègre des ombres pour plus de profondeur.