Reproductor de audio de tonos tierra de Memphis

<div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-800 transition-colors duration-300 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-amber-200 to-yellow-300 dark:from-zinc-700 dark:to-zinc-900
              border-4 border-amber-500 dark:border-zinc-500">

    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="memphis-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="10" height="10" fill="#6b4e4e" class="dark:fill-zinc-600" />
            <circle cx="15" cy="5" r="3" fill="#a0522d" class="dark:fill-zinc-400" />
            <rect x="5" y="10" width="10" height="7" fill="#d2b48c" class="dark:fill-zinc-500" />
            <path d="M0 0 L10 20 L20 0 Z" fill="#7f5539" class="dark:fill-zinc-700" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#memphis-pattern)" />
      </svg>
    </div>

    <!-- Player Content -->
    <div class="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col items-center space-y-6 sm:space-y-8">

      <!-- Top Section: Album Art & Info -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left w-full space-y-4 sm:space-y-0 sm:space-x-6">
        <div class="relative w-32 h-32 sm:w-40 sm:h-40 flex-shrink-0 rounded-tl-3xl rounded-br-3xl overflow-hidden shadow-lg border-4 border-amber-600 dark:border-zinc-600 transition-all duration-300">
          <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
          <div class="absolute bottom-0 right-0 p-2 bg-amber-600 dark:bg-zinc-600 text-amber-50 dark:text-zinc-50 text-xs font-semibold rounded-tl-lg shadow-md">Live</div>
        </div>
        <div class="flex flex-col flex-grow mt-2 sm:mt-0">
          <p class="text-xs sm:text-sm text-amber-900 dark:text-zinc-300 font-semibold mb-1 uppercase tracking-wider">Now Playing</p>
          <h3 class="text-2xl sm:text-3xl font-extrabold text-amber-800 dark:text-zinc-100 leading-tight mb-2">
            The Earth's Embrace
          </h3>
          <p class="text-lg sm:text-xl text-amber-700 dark:text-zinc-200 font-medium">
            <span class="block sm:inline-block">By </span>
            <span class="font-semibold border-b-2 border-dashed border-amber-600 dark:border-zinc-400 pb-0.5">Gaia Echoes</span>
          </p>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full flex items-center space-x-3 mt-6">
        <span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">0:45</span>
        <div class="flex-grow h-3 bg-amber-400 dark:bg-zinc-600 rounded-full overflow-hidden relative shadow-inner">
          <div class="h-full w-[45%] bg-amber-700 dark:bg-zinc-400 rounded-full relative">
            <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-amber-900 dark:bg-zinc-100 rounded-full shadow-md border-2 border-amber-500 dark:border-zinc-500"></div>
          </div>
        </div>
        <span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">3:20</span>
      </div>

      <!-- Controls -->
      <div class="w-full flex justify-around items-center text-amber-900 dark:text-zinc-200 mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
        <button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
        </button>
        <button class="p-4 sm:p-5 rounded-full bg-amber-500 dark:bg-zinc-400 text-amber-50 dark:text-zinc-900 shadow-lg transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-700 dark:border-zinc-300 focus:outline-none focus:ring-4 focus:ring-amber-700/50 dark:focus:ring-zinc-300/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M16 18h2V6h-2zM6 18l8.5-6L6 6z"/></svg>
        </button>
      </div>

      <!-- Volume and Settings -->
      <div class="w-full flex justify-between items-center mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
        <div class="flex items-center space-x-2 text-amber-800 dark:text-zinc-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M14 3.23c-.27-.2-.59-.3-.92-.3h-3.85c-.91 0-1.7.55-2.06 1.47L2 12l5.17 7.37c.36.92 1.15 1.47 2.06 1.47h3.85c.33 0 .65-.11.92-.3L22 12 14 3.23zm-.12 1.42L20 12l-7.12 7.35-.13-.13V4.65z"/></svg>
          <input type="range" class="w-24 sm:w-32 h-2 rounded-full bg-amber-400 dark:bg-zinc-600 appearance-none cursor-pointer
                                    [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-amber-700 dark:[&::-webkit-slider-thumb]:bg-zinc-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-amber-500 dark:[&::-webkit-slider-thumb]:border-zinc-500 [&::-webkit-slider-thumb]:appearance-none
                                    [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-amber-700 dark:[&::-moz-range-thumb]:bg-zinc-400 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-amber-500 dark:[&::-moz-range-thumb]:border-zinc-500">
        </div>
        <button class="p-2 sm:p-3 rounded-full bg-amber-300 dark:bg-zinc-700 text-amber-900 dark:text-zinc-200 shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </button>
      </div>

    </div>
  </div>
</div>