사이버펑크 오디오 플레이어 구성 요소

<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
  <div class="w-full max-w-sm rounded-lg overflow-hidden shadow-2xl transform hover:scale-105 transition duration-300 ease-in-out bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-purple-950 dark:to-indigo-950 border border-purple-700 dark:border-indigo-800">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Album Artwork">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <button class="p-4 rounded-full bg-purple-500 text-white shadow-lg transform hover:scale-110 active:scale-95 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 5v14l11-7z"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 text-white">
      <h3 class="text-xl font-bold text-purple-200 dark:text-purple-300 mb-1">Neon Dreams</h3>
      <p class="text-sm text-purple-300 dark:text-purple-400">Synthwave Artist</p>

      <div class="mt-4">
        <div class="w-full bg-purple-800 rounded-full h-2.5 dark:bg-purple-900">
          <div class="bg-purple-400 h-2.5 rounded-full" style="width: 65%;"></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-purple-400">
          <span>0:45</span>
          <span>3:20</span>
        </div>
      </div>

      <div class="flex justify-around items-center mt-6 text-purple-300 dark:text-purple-400">
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>
          </svg>
        </button>
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18V6h3v12H6zm5 0V6h3v12h-3zm5 0V6h3v12h-3z"></path>
          </svg>
        </button>
        <button class="p-2 focus:outline-none hover:text-purple-100 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 14.5V9.5l-6 4.5 6 4.5z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>