Bauhaus 오디오 플레이어 구성 요소

<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-none overflow-hidden border-2 border-gray-900 dark:border-gray-100 transition-all duration-300 ease-in-out">
    <!-- Header / Top Section -->
    <div class="flex items-center justify-between p-4 sm:p-6 bg-yellow-400 dark:bg-yellow-600 border-b-2 border-gray-900 dark:border-gray-100 relative">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-gray-900 uppercase tracking-wider">
        Pro Workout Mix
      </h2>
      <button class="p-2 sm:p-3 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-105 active:scale-95 transition-transform">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute top-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -mr-1 -mt-1"></div>
    </div>

    <div class="grid md:grid-cols-3">
      <!-- Left Section: Album Art & Currently Playing -->
      <div class="md:col-span-1 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-b-2 md:border-b-0 md:border-r-2 border-gray-900 dark:border-gray-100 relative">
        <div class="aspect-w-1 aspect-h-1 mb-4 flex items-center justify-center bg-gray-300 dark:bg-gray-600 border-2 border-gray-900 dark:border-gray-100 relative group">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="object-cover w-full h-full p-2 block filter grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:p-0">
          <div class="absolute top-0 left-0 w-full h-full border-4 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute top-0 left-0 w-full h-full bg-yellow-400 dark:bg-yellow-600 opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="text-center">
          <p class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-1">Push It To The Limit</p>
          <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300">Turbo Beats Feat. Fitness Flow</p>
        </div>
        <div class="absolute bottom-0 right-0 w-6 h-6 sm:w-8 sm:h-8 bg-gray-900 dark:bg-gray-100 -mr-1 -mb-1"></div>
      </div>

      <!-- Middle Section: Controls & Progress -->
      <div class="md:col-span-2 p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 relative">

        <!-- Progress Bar -->
        <div class="w-full mb-6 relative">
          <div class="h-2 bg-gray-300 dark:bg-gray-700 border border-gray-900 dark:border-gray-100 relative">
            <div class="absolute h-full bg-yellow-400 dark:bg-yellow-600" style="width: 60%;"></div>
            <div class="absolute -mt-1 -ml-1 h-4 w-4 bg-gray-900 dark:bg-gray-100 border-2 border-yellow-400 dark:border-yellow-600" style="left: 60%; transform: translateX(-50%);"></div>
          </div>
          <div class="flex justify-between text-xs mt-2 text-gray-700 dark:text-gray-300">
            <span>2:35</span>
            <span>-1:45</span>
          </div>
        </div>

        <!-- Main Controls -->
        <div class="flex justify-center items-center space-x-4 sm:space-x-6 mb-8">

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.793 4.793a1 1 0 011.414 0L10 8.586l3.793-3.793a1 1 0 111.414 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm: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.832L12.744 10l-3.189-2.832z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.207 4.793a1 1 0 010 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 011.414-1.414L10 8.586l3.793-3.793a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Volume Control -->
        <div class="flex items-center justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-6">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494z" clip-rule="evenodd"></path></svg>
          <input type="range" class="w-32 bg-gray-300 dark:bg-gray-700 h-2 accent-yellow-400 dark:accent-yellow-600 border border-gray-900 dark:border-gray-100 outline-none hover:outline-none focus:outline-none" value="70">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494zM16.924 3.078a1 1 0 00-1.088 1.636 7.004 7.004 0 010 10.572 1 1 0 001.088 1.636 9.004 9.004 0 000-13.844z" clip-rule="evenodd"></path></svg>
        </div>

        <div class="absolute bottom-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mb-1"></div>
      </div>

      <!-- Right Section: Track List -->
      <div class="md:col-span-3 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-900 dark:border-gray-100 relative">
        <h3 class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-4">
          Playlist Tracks
        </h3>
        <ul class="space-y-3">
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-yellow-400 dark:hover:border-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">01</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Push It To The Limit</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Turbo Beats Feat. Fitness Flow</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:20</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">02</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Adrenaline Rush Zone</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Synth Pulse</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:55</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">03</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Endurance Max</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Power Drifters</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">5:10</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">04</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Beat Drop Blitz</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Rhythmic Force Inc.</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:40</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">05</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Victory Lap Anthem</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">The Finish Line Project</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:50</span>
          </li>
        </ul>
        <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mt-1"></div>
      </div>
    </div>
  </div>
</div>