Interactive Components Component

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-emerald-50 to-cyan-50 dark:from-slate-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <div class="flex items-center space-x-4 mb-6 sm:mb-8">
      <div class="aspect-video w-20 sm:w-24 md:w-28 flex-shrink-0 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
        <img src="https://picsum.photos/300/200?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <div class="flex-grow min-w-0">
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-50 truncate mb-1">
          Epic Soundtrack Loop
        </h3>
        <p class="text-sm sm:text-base text-cyan-600 dark:text-teal-400 truncate">
          Unknown Artist
        </p>
      </div>
    </div>

    <!-- Playback Controls -->
    <div class="flex justify-around items-center mb-6 sm:mb-8">
      <button class="p-2 sm:p-3 rounded-full bg-emerald-100 dark:bg-emerald-700 text-emerald-600 dark:text-white hover:bg-emerald-200 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 10.293a1 1 0 010-1.414L10.586 6V7a1 1 0 011 1v4a1 1 0 01-1 1v1l-2.879-2.879a1 1 0 01-.11-.13V10.293zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="p-3 sm:p-4 rounded-full bg-cyan-500 dark:bg-cyan-600 text-white shadow-lg hover:bg-cyan-600 dark:hover:bg-cyan-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        <svg class="w-6 h-6 sm:w-7 sm:h-7" 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.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>
        <!-- Or use pause icon: -->
        <!-- <svg class="w-6 h-6 sm:w-7 sm:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg> -->
      </button>
      <button class="p-2 sm:p-3 rounded-full bg-emerald-100 dark:bg-emerald-700 text-emerald-600 dark:text-white hover:bg-emerald-200 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 10.293a1 1 0 011.414 0l2.879 2.879A1 1 0 0116 13V7a1 1 0 01-1-1v-1l-2.879 2.879a1 1 0 01-.13.11V10.293zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Progress Bar -->
    <div class="mb-6 sm:mb-8">
      <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-2 relative">
        <div class="h-full bg-cyan-500 dark:bg-cyan-400 w-1/3 rounded-full absolute top-0 left-0 transition-all duration-300 ease-out" style="width: 33.33%;"></div>
        <div class="w-3 h-3 bg-cyan-700 dark:bg-cyan-300 rounded-full absolute top-1/2 -mt-1.5 left-1/3 -ml-1.5 shadow-md transform -translate-x-1/2 transition-all duration-300 ease-out"></div>
      </div>
      <div class="flex justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400">
        <span>2:15</span>
        <span>6:40</span>
      </div>
    </div>

    <!-- Volume Control -->
    <div class="flex items-center space-x-3 text-gray-600 dark:text-gray-300">
      <svg class="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.293 7.293a1 1 0 011.414 0L17 8.586l1.293-1.293a1 1 0 111.414 1.414L18.414 10l1.293 1.293a1 1 0 01-1.414 1.414L17 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L15.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      <div class="flex-grow h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full relative">
        <div class="h-full bg-emerald-500 dark:bg-emerald-400 w-3/4 rounded-full absolute top-0 left-0 transition-all duration-300 ease-out" style="width: 75%;"></div>
        <div class="w-3 h-3 bg-emerald-700 dark:bg-emerald-300 rounded-full absolute top-1/2 -mt-1.5 left-3/4 -ml-1.5 shadow-md transform -translate-x-1/2 transition-all duration-300 ease-out"></div>
      </div>
    </div>
  </div>
</div>