Lettore audio brutalista

<div class="min-h-screen bg-stone-100 dark:bg-black p-8 flex items-center justify-center">
  <div class="w-full max-w-md bg-white dark:bg-stone-900 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] border-[4px] border-black dark:border-white overflow-hidden">
    <div class="p-6">
      <h3 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">Now Playing</h3>
      <div class="flex items-center mb-6">
        <img class="w-16 h-16 object-cover border-4 border-black dark:border-white mr-4" src="https://picsum.photos/100/100" alt="Album Art">
        <div>
          <p class="text-xl font-semibold text-black dark:text-white">Track Title</p>
          <p class="text-black dark:text-white">Artist Name</p>
        </div>
      </div>
      <div class="mb-6">
        <div class="h-4 bg-gray-300 dark:bg-stone-700 border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white mb-6">
        <span>0:00</span>
        <span>3:45</span>
      </div>
      <div class="flex justify-center space-x-6">
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Prev</button>
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Play</button>
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Next</button>
      </div>
    </div>
  </div>
</div>