3D_Candy_Music_Player_Progress

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl p-6 md:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out
    border border-pink-200 dark:border-gray-700
    hover:shadow-2xl hover:scale-[1.01]
    relative
    before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-pink-50 before:via-purple-50 before:to-blue-50 before:opacity-0 hover:before:opacity-100 dark:before:from-gray-800 dark:before:via-gray-700 dark:before:to-gray-600 dark:hover:before:opacity-5">

    <!-- Background '3D' elements -->
    <div class="absolute -top-10 -left-10 w-32 h-32 bg-pink-300 dark:bg-fuchsia-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
    <div class="absolute -bottom-8 -right-8 w-40 h-40 bg-purple-300 dark:bg-violet-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/4 right-5 w-24 h-24 bg-blue-300 dark:bg-cyan-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>

    <div class="relative z-10 space-y-6">
      <!-- Song Info & Album Art -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
        <div class="relative w-32 h-32 sm:w-24 sm:h-24 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg transform transition-all duration-300 ease-in-out
          bg-gradient-to-br from-pink-300 to-purple-300 dark:from-fuchsia-700 dark:to-violet-700
          hover:scale-105 hover:rotate-3"> 
          <!-- 3D effect border -->
          <div class="absolute inset-0.5 rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/id/1043/300/300" alt="Album Art" class="w-full h-full object-cover" />
          </div>
          <div class="absolute inset-0.5 rounded-2xl border-4 border-white border-opacity-30 dark:border-gray-800 dark:border-opacity-30"></div>
        </div>
        <div class="text-center sm:text-left">
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-1 leading-tight tracking-wider transform transition-colors duration-300">
            Dreamy Synthwave
          </h3>
          <p class="text-md sm:text-lg text-gray-600 dark:text-gray-300 tracking-wide transform transition-colors duration-300">
            <span class="font-semibold text-purple-600 dark:text-purple-400">Synthwave Artist</span> - Album Name
          </p>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="relative py-4">
        <div class="w-full h-4 relative rounded-full bg-pink-200 dark:bg-gray-700 shadow-inner overflow-hidden">
          <!-- 3D 'track' -->
          <div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-100 via-purple-100 to-blue-100 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
          <div class="absolute bottom-0 left-0 right-0 h-2 bg-pink-300 dark:bg-gray-900 rounded-b-full opacity-30"></div>

          <!-- Progress fill -->
          <div class="absolute top-0 left-0 h-4 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 dark:from-fuchsia-600 dark:to-violet-600 shadow-lg glow-pink-purple transition-all duration-500 ease-out"
            style="width: 65%;">
            <!-- Inner 3D sparkle -->
            <div class="absolute inset-0 rounded-full bg-white opacity-20 dark:opacity-10 glow-white"></div>
            <!-- 3D 'edge' -->
            <div class="absolute bottom-0 left-0 right-0 h-2 bg-purple-500 dark:bg-violet-800 rounded-b-full opacity-50"></div>
          </div>

          <!-- Playhead 'knob' -->
          <div class="absolute top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-gradient-to-tr from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 shadow-xl
            flex items-center justify-center glow-pink-purple transition-all duration-500 ease-out"
            style="left: 65%; transform: translateX(-50%) translateY(-50%);">
            <div class="w-3 h-3 rounded-full bg-white dark:bg-gray-100 shadow-md"></div>
          </div>
        </div>
        <div class="flex justify-between text-sm mt-2 text-gray-500 dark:text-gray-400">
          <span class="font-medium">2:35</span>
          <span class="font-medium">3:45</span>
        </div>
      </div>

      <!-- Volume/Playback Speed Bars (mini-progress indicators) -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
        <div>
          <label for="volume-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Volume</label>
          <div class="w-full h-3 relative rounded-full bg-teal-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-teal-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-teal-400 to-emerald-400 dark:from-emerald-600 dark:to-teal-600 shadow-md glow-teal-emerald"
              style="width: 80%;"></div>
          </div>
        </div>
        <div>
          <label for="speed-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Speed</label>
          <div class="w-full h-3 relative rounded-full bg-orange-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-orange-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-orange-400 to-amber-400 dark:from-amber-600 dark:to-orange-600 shadow-md glow-orange-amber"
              style="width: 50%;"></div>
          </div>
        </div>
      </div>

      <!-- Controls (example, not focus of progress) -->
      <div class="flex justify-around items-center pt-6 text-gray-500 dark:text-gray-400">
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- < Previous Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
          </svg>
        </button>
        <button class="p-4 rounded-full bg-gradient-to-br from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 text-white shadow-xl glow-pink-purple
          transition-all duration-300 ease-in-out transform hover:scale-105 hover:rotate-3 active:scale-95
          relative overflow-hidden group"
          aria-label="Play">
          <div class="absolute inset-0 rounded-full bg-white opacity-10 dark:opacity-5 group-hover:opacity-20 transition-opacity duration-300"></div>
          <!-- Play Icon -->
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- Next Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
        </button>
      </div>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D effect and animations -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.4, 0.4, 0.8);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Glow effects */
  .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.4)) drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3));
  }
  .dark .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(186, 104, 200, 0.3)) drop-shadow(0 2px 4px rgba(126, 75, 140, 0.2)); /* Darker glow for dark mode */
  }

  .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(20, 184, 166, 0.3)) drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
  }
  .dark .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2)) drop-shadow(0 1px 2px rgba(20, 184, 166, 0.1));
  }

  .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3)) drop-shadow(0 1px 2px rgba(245, 158, 11, 0.2));
  }
  .dark .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)) drop-shadow(0 1px 2px rgba(249, 115, 22, 0.1));
  }

  .glow-white {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  }

</style>