Retro_Vintage_Audio_Player_Social_Media

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-mono">
  <div class="w-full max-w-sm rounded-xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-stone-50 to-stone-200
              dark:from-stone-700 dark:to-stone-900
              p-6 space-y-6 border border-stone-300 dark:border-stone-600
              relative transform transition-all duration-300 hover:scale-105">

    <!-- Top Section: Header & User Info -->
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-500 shadow-md"
             src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-bold text-stone-800 dark:text-stone-200">@SynthWaveSally</p>
          <p class="text-xs text-stone-600 dark:text-stone-400">Sharing a vibe...</p>
        </div>
      </div>
      <span class="text-stone-500 dark:text-stone-400 text-xs">3m ago</span>
    </div>

    <!-- Album Art & Track Info -->
    <div class="relative w-full aspect-square rounded-lg overflow-hidden shadow-lg border border-stone-300 dark:border-stone-600">
      <img class="w-full h-full object-cover" src="https://picsum.photos/400/400?grayscale&blur=2" alt="Album Art">
      <div class="absolute inset-0 bg-black bg-opacity-30 flex flex-col items-center justify-center p-4">
        <p class="text-xl font-extrabold text-white text-center drop-shadow-lg">Neon Dreams</p>
        <p class="text-sm text-stone-200 text-center mt-1 drop-shadow-md">The Retro Bandidos</p>
      </div>
    </div>

    <!-- Controls - Retro Buttons -->
    <div class="grid grid-cols-3 gap-3">
      <button aria-label="Previous Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90" 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>
      </button>
      <button aria-label="Play/Pause" class="flex items-center justify-center p-4 rounded-full
                  bg-amber-400 dark:bg-amber-600 text-amber-900 dark:text-amber-100
                  shadow-xl hover:shadow-2xl transition-all duration-200
                  border border-amber-500 dark:border-amber-700
                  active:bg-amber-500 dark:active:bg-amber-700 group relative -top-1">
        <svg class="w-7 h-7 group-active:scale-90" 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>
      </button>
      <button aria-label="Next Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90 scale-x-[-1]" 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>
      </button>
    </div>

    <!-- Progress Bar (Fake) -->
    <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 relative shadow-inner overflow-hidden">
      <div class="bg-amber-400 dark:bg-amber-500 h-2.5 rounded-full" style="width: 65%;"></div>
      <div class="absolute top-1/2 -mt-2 left-[65%] transform -translate-x-1/2 w-4 h-4 rounded-full bg-amber-600 dark:bg-amber-400 shadow-md border-2 border-stone-100 dark:border-stone-800"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-600 dark:text-stone-400">
      <span>0:45</span>
      <span>3:10</span>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-around pt-2 border-t border-stone-300 dark:border-stone-700">
      <button aria-label="Like" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-red-500 dark:hover:text-red-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
        <span class="text-sm">1.2K</span>
      </button>
      <button aria-label="Comment" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-blue-500 dark:hover:text-blue-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>
        <span class="text-sm">345</span>
      </button>
      <button aria-label="Share" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-green-500 dark:hover:text-green-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.79l-4.71-2.91c.07-.22.11-.45.11-.69s-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.79l4.71 2.91c-.07.22-.11.45-.11.69s.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3c0-.24-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3z"></path></svg>
        <span class="text-sm">123</span>
      </button>
    </div>

    <!-- Vintage Speaker Grille Detail -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-stone-300 dark:bg-stone-700 border-t border-stone-400 dark:border-stone-600
                flex justify-around items-center rounded-b-xl px-2">
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
    </div>

  </div>
</div>