Composant de lecteur audio
Un composant de lecteur audio réactif conçu en mode sombre à l’aide de Tailwind CSS. Il prend en charge le thème sombre et fournit une interface propre pour la lecture audio.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-md max-w-lg mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/80/80" alt="Album Art" class="rounded-full border-2 border-gray-600">
<div class="ml-4">
<h2 class="text-lg font-semibold">Song Title</h2>
<p class="text-gray-400">Artist Name</p>
</div>
</div>
<audio controls class="w-full mb-4">
<source src="path_to_your_audio_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex items-center justify-between">
<button class="text-gray-300 hover:text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
<div class="flex items-center">
<button class="text-gray-300 hover:text-white mx-2">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
<input type="range" class="w-32 mx-2 accent-gray-600" value="50" />
<button class="text-gray-300 hover:text-white mx-2">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
</div>
<button class="text-gray-300 hover:text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3l7 7-7 7-7-7 7-7z" />
</svg>
</button>
</div>
</div>Composants associés
Lecteur audio neumorphe
Un composant simple de lecteur audio neumorphe avec un schéma de couleurs Earth Tones pour un tableau de bord, construit avec Tailwind CSS. Il prend en charge le design réactif et le thème sombre.
Lecteur audio rétro
Composant de lecteur audio avec design rétro/vintage, palette de couleurs pastel, complexité complexe, objectif des médias sociaux, réactif, prise en charge du thème sombre, HTML uniquement avec CSS Tailwind
Composant de lecteur audio
Un composant de lecteur audio réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres et froides, une prise en charge du mode sombre et des fonctionnalités interactives adaptées aux plates-formes de divertissement et de médias.