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 monocromatico 3D
Componente lettore audio monocromatico 3D reattivo per Portfolio, con supporto per la modalità scura
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.
Lettore audio neumorfico
Un semplice componente del lettore audio neumorfico con una combinazione di colori dei toni della terra per un cruscotto, costruito con Tailwind CSS. Supporta il design reattivo e il tema scuro.