Componente lettore audio
Un semplice componente del lettore audio progettato con uno stile scheumorfico, utilizzando una combinazione di colori in scala di grigi e supportando la modalità scura.
Codice HTML
<div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg max-w-xs mx-auto dark:bg-gray-800">
<div class="flex items-center justify-between mb-2">
<img src="https://picsum.photos/80/80" alt="Album Cover" class="rounded-lg shadow-md"/>
<div class="flex flex-col">
<h4 class="text-xl font-semibold">Track Title</h4>
<p class="text-gray-400">Artist Name</p>
</div>
</div>
<audio controls class="w-full">
<source src="audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex justify-between mt-2">
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
⏮
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
Play
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
⏭
</button>
</div>
</div>Componenti correlati
Lettore audio brutalista
Un componente per lettore audio brutalista con design reattivo, supporto per la modalità oscura e assenza di JavaScript.
Lettore audio retrò
Componente lettore audio con design retrò / vintage, combinazione di colori pastello, complessità complessa, scopo per i social media, reattivo, supporto per temi scuri, HTML solo con Tailwind CSS
Componente lettore audio
Un componente del lettore audio reattivo progettato in modalità oscura utilizzando Tailwind CSS. Supporta il tema scuro e fornisce un'interfaccia pulita per la riproduzione audio.