Lettore audio di lusso/premium

<div class="max-w-md mx-auto p-4 md:p-6 rounded-xl shadow-xl bg-orange-50 dark:bg-zinc-800 transition-colors duration-300 transform hover:scale-[1.01] ease-in-out">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-md" src="https://picsum.photos/id/1047/100/100" alt="Album Art">
    </div>
    <div class="flex-1 min-w-0">
      <h3 class="text-lg md:text-xl font-serif text-amber-900 dark:text-orange-200 truncate">Autumn Leaves Melody</h3>
      <p class="text-sm md:text-base text-orange-700 dark:text-zinc-400 truncate">by <span class="font-medium">Elegant Soundscapes</span></p>
    </div>
  </div>

  <div class="mt-4">
    <input type="range" class="w-full h-1 bg-amber-200 rounded-lg appearance-none cursor-pointer accent-orange-700 dark:bg-zinc-600 dark:accent-orange-500" value="30" min="0" max="100">
    <div class="flex justify-between text-xs mt-1 text-orange-600 dark:text-zinc-400 font-mono">
      <span>0:30</span>
      <span>3:45</span>
    </div>
  </div>

  <div class="flex justify-center items-center mt-6 space-x-6">
    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Previous Track</span>
    </button>

    <button class="flex items-center justify-center p-3 md:p-4 rounded-full bg-orange-700 text-orange-50 shadow-lg hover:bg-orange-800 dark:bg-orange-600 dark:text-zinc-900 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Play/Pause</span>
    </button>

    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm5.293-9.293a1 1 0 00-1.414 0L10 11.586l-3.293-3.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Next Track</span>
    </button>
  }

</div>