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 de cartes neumorphes
Un composant de cartes réactives conçu dans le style Neumorphism avec prise en charge du thème sombre, avec des ombres subtiles et une mise en page flexible.
Composant Cartes Skeuomorphic
Un composant de cartes simple conçu dans un style skeuomorphe, utilisant un schéma de couleurs analogue pour la lecture et la consommation de contenu. Ce composant est réactif et prend en charge le thème sombre.
Composant Cartes de médias sociaux
Un composant de carte minimaliste et dynamique adapté aux interfaces de médias sociaux, affichant les messages des utilisateurs avec des images, des likes, des commentaires et des options de partage. Il est entièrement réactif et prend en charge le mode sombre.