뉴모픽 오디오 플레이어

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-300 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="flex items-center mb-4">
      <img class="w-16 h-16 rounded-full mr-4 shadow-neumorphic-light dark:shadow-neumorphic-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Album Art">
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
      </div>
    </div>
    <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <div class="w-1/2 h-full bg-green-600 dark:bg-green-500 rounded-full"></div>
    </div>
    <div class="flex items-center justify-around">
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="p-4 rounded-full bg-green-500 dark:bg-green-600 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed transform scale-110">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20"><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.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</div>

<style>.shadow-neumorphic-light { box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff; } .dark .shadow-neumorphic-dark { box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #969696; } .shadow-inner-neumorphic-light { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .shadow-inner-neumorphic-dark { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; } .hover\:shadow-neumorphic-light-pressed:hover { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .hover\:shadow-neumorphic-dark-pressed:hover { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; }</style>