Lecteur audio monochromatique 3D
Composant de lecteur audio monochromatique 3D réactif pour portefeuille, avec prise en charge du mode sombre
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-sm p-6 transform transition-all duration-300 hover:scale-105">
<!-- 3D Effect Base -->
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-lg opacity-50 transform translate-x-2 translate-y-2"></div>
<div class="relative z-10">
<!-- Album Art (Placeholder with 3D depth) -->
<div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-md mb-4 overflow-hidden relative">
<img src="https://picsum.photos/400/300" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-110">
<!-- Simple Overlay for Depth -->
<div class="absolute inset-0 bg-black opacity-10"></div>
</div>
<!-- Song Title and Artist -->
<div class="text-center mb-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title Goes Here</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
</div>
<!-- Progress Bar (Simple 3D look) -->
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4 relative">
<div class="bg-blue-500 dark:bg-blue-400 h-2.5 rounded-full" style="width: 50%;"></div>
<!-- Simple highlight for 3D effect -->
<div class="absolute top-0 left-0 h-full bg-white opacity-20 rounded-full" style="width: 50%;"></div>
</div>
<!-- Controls (Simple, with potential for interactive 3D effect on hover) -->
<div class="flex justify-center space-x-6">
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
<!-- Simple SVG Placeholder for Previous Button -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-125">
<!-- Simple SVG Placeholder for Play Button -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 14.17V9.83a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
<!-- Simple SVG Placeholder for Next Button -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
Composant de lecteur audio
Un composant de lecteur audio complexe conçu pour un tableau de bord, doté d’un design réactif, d’une prise en charge des thèmes sombres et de micro-interactions attrayantes.
Lecteur audio Neumorphism
Composant de lecteur audio de style Neumorphism avec commandes de lecture, de pause, de saut et de volume, conçu pour les sites Web d’entreprise. Comprend une barre de progression, le titre de la chanson, l’artiste et la pochette de l’album. Comprend un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Lecteur audio skeuomorphe
Un composant de lecteur audio conçu avec un style Skeuomorphic, une palette de couleurs pastel et une interface complexe. Il prend en charge le mode sombre et est réactif, adapté aux sites de commerce électronique.