뉴모피즘 오디오 플레이어

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-xl dark:shadow-xl-dark">
    <div class="flex flex-col items-center">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark flex items-center justify-center">
        <img src="https://picsum.photos/128" alt="Album Artwork" class="rounded-full w-full h-full object-cover">
      </div>
      <h3 class="mt-4 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 - Album Name</p>
    </div>

    <div class="w-full mt-6">
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-xs">
        <span>0:00</span>
        <span>3:45</span>
      </div>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 30%;"></div>
      </div>
    </div>

    <div class="flex items-center justify-around mt-8">
      <button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic-lg dark:shadow-neumorphic-lg-dark">
        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" 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="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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 class="flex items-center mt-6">
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M9.384 4.464A1 1 0 0110 4v12a1 1 0 01-1.707.707L6 14H3a1 1 0 01-1-1V7a1 1 0 011-1h3l2.293-2.293a1 1 0 011.091-.243zM14.003 7.77a.75.75 0 01.412 1.367l-3.495 1.896-.943-.943 3.496-1.897z" clip-rule="evenodd"></path>
      </svg>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 60%;"></div>
      </div>
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-b b a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414zm-1.414 4.242a1 1 0 10-1.414 1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        <path d="M1.723 13.863a1 1 0 00-.723.451l-1 1.5A1 1 0 001 18.122V19a1 1 0 001 1h1a1 1 0 001-1v-.878A1 1 0 003.723 18L3 16.863a1 1 0 00-.723-.451zM4 5a1 1 0 00-1 1v8a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H4z" clip-rule="evenodd"></path>
      </svg>
    </div>
  </div>
</div>

<style>
  .shadow-xl-dark {
    box-shadow: 7px 7px 15px #1f1f1f, -7px -7px 15px #2d2d2d;
  }
  .shadow-inner-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1f1f1f, -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic-lg {
     box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-lg-dark {
     box-shadow: 8px 8px 15px #1f1f1f, -8px -8px 15px #2d2d2d;
  }
</style>