Retro_Gaming_Audio_Player

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-800 via-pink-700 to-orange-600 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-800 dark:to-gray-950 rounded-lg p-6 shadow-2xl border-4 border-gray-900 dark:border-gray-700 font-mono transform hover:scale-103 transition-transform duration-300 relative overflow-hidden">
    <!-- Top 'Display' Section -->
    <div class="h-16 w-full bg-gradient-to-r from-green-500 to-green-700 dark:from-green-700 dark:to-green-900 rounded-md mb-4 flex items-center justify-around">
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REC</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">PLAY</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">FF</div>
      <div class="text-orange-300 dark:text-orange-500 text-sm sm:text-base font-bold tracking-widest">REW</div>
    </div>

    <!-- Cassette Tape Area -->
    <div class="relative bg-gradient-to-br from-red-600 to-purple-800 dark:from-purple-800 dark:to-pink-900 rounded-lg p-4 mb-6 shadow-inner border-2 border-orange-500 dark:border-purple-600 flex justify-center items-center h-48 sm:h-56 md:h-64 lg:h-72 aspect-video">
      <!-- Cassette Spools -->
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 left-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <div class="absolute w-20 h-20 sm:w-24 sm:h-24 bg-gray-900 rounded-full border-4 border-red-400 dark:border-purple-300 top-1/2 -mt-10 sm:-mt-12 right-4 flex items-center justify-center animate-spin-slow">
        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-700 rounded-full"></div>
      </div>
      <!-- Cassette Label/Display -->
      <div class="absolute w-2/3 h-2/3 bg-gray-200 dark:bg-gray-700 border-2 border-gray-500 dark:border-gray-900 rounded-md flex flex-col justify-center items-center p-2 text-center">
        <p class="text-xs sm:text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider mb-1">Game Mix '89</p>
        <p class="text-xxs sm:text-xs text-gray-600 dark:text-gray-400 mb-1">Track 03: 'Cyber Runner'</p>
        <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full relative overflow-hidden">
          <div class="absolute h-full bg-green-500 dark:bg-green-400" style="width: 65%;"></div>
        </div>
      </div>
    </div>

    <!-- Controls Grid -->
    <div class="grid grid-cols-3 gap-3 md:grid-cols-5 md:gap-4 lg:grid-cols-6 lg:gap-5">
      <button aria-label="Record" class="col-span-1 p-3 sm:p-4 bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-red-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Play" class="col-span-1 p-3 sm:p-4 bg-green-600 hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-900 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-green-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.528 8.046a.75.75 0 00-.757-.107l-3.5 1.75A.75.75 0 005 10.37V15.5a.75.75 0 001.121.65l3.5-1.75a.75.75 0 00.107-.757L9.528 8.046z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Stop" class="col-span-1 p-3 sm:p-4 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.75 7A.75.75 0 008 7.75v4.5a.75.75 0 001.5 0v-4.5A.75.75 0 008.75 7z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Previous Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.79 5.23A.75.75 0 0113.75 6v8a.75.75 0 01-1.28.53l-3.5-4a.75.75 0 010-1.06l3.5-4a.75.75 0 01.54-.22zM7.5 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Next Track" class="col-span-1 p-3 sm:p-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.21 14.77A.75.75 0 016.25 14V6a.75.75 0 011.28-.53l3.5 4a.75.75 0 010 1.06l-3.5 4a.75.75 0 01-.54.22zM12.5 12.25a.75.75 0 001.5 0v-4.5a.75.75 0 00-1.5 0v4.5z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Eject" class="col-span-1 p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-700 dark:hover:bg-orange-800 rounded-full shadow-md transform hover:scale-110 active:scale-95 transition ease-in-out duration-200 flex items-center justify-center group">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-orange-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75a.75.75 0 00-1.06 0l-.75.75zm9.56-.75a.75.75 0 00-1.06 0l-.75.75a.75.75 0 000 1.06l.75.75a.75.75 0 001.06 0l.75-.75a.75.75 0 000-1.06l-.75-.75zM10 18a8 8 0 100-16 8 8 0 000 16zM10 5a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0010 5z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Volume Slider (placeholder for functionality) -->
    <div class="mt-6">
      <label for="volume" class="block text-gray-200 dark:text-gray-400 text-sm mb-2 uppercase tracking-wide">Volume</label>
      <input type="range" id="volume" name="volume" min="0" max="100" value="70" class="w-full h-3 bg-gray-500 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer range-lg accent-orange-400 dark:accent-purple-400">
    </div>

    <!-- Small decorative lights/indicators -->
    <div class="absolute bottom-4 left-4 flex space-x-2">
      <div class="w-3 h-3 bg-red-400 dark:bg-red-600 rounded-full animate-pulse"></div>
      <div class="w-3 h-3 bg-yellow-400 dark:bg-yellow-600 rounded-full"></div>
    </div>

    <!-- Decorative grills -->
    <div class="absolute bottom-4 right-4 h-6 w-16 bg-gray-600 dark:bg-gray-800 rounded-full flex items-center justify-between px-2">
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
    </div>
  </div>
</div>

<style>
  /* Custom spin animation for cassette spools */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin-slow {
    animation: spin-slow 3s linear infinite;
  }

  /* Custom range slider styling for retro feel */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    margin-top: -8px; /* Adjust for Firefox */
  }

  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--tw-gradient-stops));
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-webkit-slider-runnable-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #6b7280; /* Tailwind gray-500 */
    border-radius: 3px;
  }

  .dark input[type="range"]::-moz-range-track {
    background: #4b5563; /* Tailwind gray-700 */
  }

  /* Tailwind's accent property for range input uses CSS custom properties.
     We define them here to ensure consistent color application for thumbs. */
  :root {
    --tw-accent-orange-400: #fbbf24;
    --tw-accent-purple-400: #a78bfa;
  }

  /* Apply solid color to these elements as they are not gradients */
  .accent-orange-400 {
    color: var(--tw-accent-orange-400);
  }
  .dark .accent-purple-400 {
    color: var(--tw-accent-purple-400);
  }
</style>