Playful Audio Player 컴포넌트

<div class="flex items-center justify-center min-h-screen p-4 bg-amber-50 dark:bg-stone-900">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-amber-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 border-2 border-amber-200 dark:border-stone-700 transform transition-all duration-300 hover:scale-[1.01]">
    <div class="flex items-center space-x-4 mb-6">
      <div class="relative w-20 h-20 flex-shrink-0">
        <img src="https://picsum.photos/id/1080/200/200" alt="Album Art" class="rounded-full object-cover w-full h-full shadow-md border-2 border-amber-300 dark:border-stone-600">
        <div class="absolute inset-0 rounded-full ring-4 ring-amber-200 dark:ring-stone-700 animate-pulse"></div>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-xl font-bold truncate text-amber-900 dark:text-amber-100 mb-1">Groovy Tunes</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 truncate">By Awesome Artist</p>
      </div>
    </div>

    <div class="w-full flex items-center mb-6">
      <span class="text-xs text-stone-500 dark:text-stone-400 mr-2">0:45</span>
      <div class="flex-1 h-2 bg-amber-200 dark:bg-stone-700 rounded-full overflow-hidden relative">
        <div class="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full" style="width: 60%;"></div>
        <div class="absolute top-1/2 -mt-2 -mr-2 w-4 h-4 bg-amber-700 dark:bg-amber-400 rounded-full shadow-md" style="left: 60%; transform: translateX(-50%);"></div>
      </div>
      <span class="text-xs text-stone-500 dark:text-stone-400 ml-2">3:20</span>
    </div>

    <div class="flex justify-around items-center mb-4">
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="19 20 9 12 19 4 19 20"></polygon>
          <line x1="5" y1="19" x2="5" y2="5"></line>
        </svg>
      </button>
      <button class="p-4 rounded-full bg-amber-500 dark:bg-amber-600 text-white shadow-lg hover:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 3 19 12 5 21 5 3"></polygon>
        </svg>
      </button>
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 4 15 12 5 20 5 4"></polygon>
          <line x1="19" y1="5" x2="19" y2="19"></line>
        </svg>
      </button>
    </div>

    <div class="flex justify-between text-stone-500 dark:text-stone-400">
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="2"></circle>
          <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48 0a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="1" y1="3" x2="23" y2="21"></line>
          <path d="M15 5H9l-7 18h22L15 5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M7 21l-4-4V3.5a2.5 2.5 0 0 1 5 0V17l-4 4zM16.5 3.5a2.5 2.5 0 0 0-5 0V17l4 4 4-4V3.5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 17H2a4 4 0 0 1 4-4h12l4 4zM2 7h20a4 4 0 0 0-4-4H6l-4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>