Memphis_Audio_Player_Component

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl shadow-xl overflow-hidden relative border-4 border-stone-200 dark:border-stone-700 bg-amber-50 dark:bg-stone-900 animate-fade-in">

    <!-- Decorative Memphis Shapes -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-rose-300 dark:bg-rose-700 rounded-full opacity-70 rotate-12"></div>
    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-lime-300 dark:bg-lime-700 rounded-full opacity-70 -rotate-45"></div>
    <div class="absolute top-1/4 left-0 w-16 h-16 bg-sky-300 dark:bg-sky-700 transform -translate-x-1/2 rotate-90"></div>
    <div class="absolute bottom-1/3 right-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-700 transform translate-x-1/2 -rotate-12"></div>
    <div class="absolute top-qtr right-1/4 w-12 h-12 bg-orange-300 dark:bg-orange-700 rounded-lg opacity-80 rotate-45"></div>

    <div class="relative p-6 sm:p-8 lg:p-10 z-10">

      <!-- Header / Album Art -->
      <div class="flex flex-col items-center mb-6 sm:mb-8">
        <div class="w-40 h-40 sm:w-48 sm:h-48 rounded-2xl overflow-hidden shadow-lg border-4 border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 ease-in-out">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-900 dark:text-stone-100 mt-5 mb-1 text-center font-serif leading-tight">Groovy Synthwave Hits</h3>
        <p class="text-stone-600 dark:text-stone-400 text-lg sm:text-xl font-medium text-center font-sans tracking-wide">The Retro Beats</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-3 sm:h-4 mb-5 sm:mb-6 relative">
        <div class="bg-rose-500 rounded-full h-full w-2/3 shadow-md"></div>
        <div class="absolute -top-1 right-1/3 w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-rose-500 border-2 border-stone-50 dark:border-stone-900 shadow-lg cursor-grab hover:scale-110 transition-transform duration-200"></div>
      </div>
      <div class="flex justify-between text-sm sm:text-base text-stone-500 dark:text-stone-400 mb-8 sm:mb-10">
        <span>2:45</span>
        <span>-1:15</span>
      </div>

      <!-- Controls -->
      <div class="grid grid-cols-5 items-center gap-4 text-stone-800 dark:text-stone-200">
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18V6l-8 6 8 6zm3.29-1.39L18 12l-3.71-4.61C14.1 6.57 15.03 6 16 6h1c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1h-1c-.97 0-1.9-.57-2.71-1.39z"/></svg>
          <span class="sr-only">Previous Track</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
          <span class="sr-only">Volume</span>
        </button>

        <button class="col-span-1 flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-rose-500 text-white shadow-lg border-4 border-stone-50 dark:border-stone-900 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-rose-300 focus:ring-opacity-70 transition-all duration-300 group -mt-4">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 group-hover:rotate-6 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          <span class="sr-only">Play/Pause</span>
        </button>

        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>
          <span class="sr-only">Repeat</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M13 6v14l8-6-8-8zM6.71 16.39L6 18c.97 0 1.9.57 2.71 1.39C9.9 20.43 10.83 21 11.72 21H12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-.28c-.89 0-1.82.57-2.71 1.39S6.9 6.57 6 7.61L6.71 6.39l-3.71 4.61L6 12l-3.71-4.61z"/></svg>
          <span class="sr-only">Next Track</span>
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  /* Add custom keyframes for entry animation */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>