App Downloads Dashboard Card

<div class="w-[350px] max-w-full bg-white/10 border border-white/20 rounded-2xl shadow-2xl backdrop-blur-xl flex flex-col overflow-hidden">
  <div class="flex flex-col gap-2 border-b border-white/10 px-6 py-5 bg-white/5">
    <div class="text-white font-semibold text-lg leading-tight tracking-tight">App Downloads</div>
    <div class="text-white/60 text-xs">Last 30 days</div>
  </div>
  <div class="flex border-b border-white/10 bg-white/5">
    <button class="flex-1 text-white border-b-2 border-sky-400 font-medium text-sm py-3 tab-btn active">All</button>
    <button class="flex-1 text-white/60 border-b-2 border-transparent font-medium text-sm py-3 hover:text-white tab-btn">iOS</button>
    <button class="flex-1 text-white/60 border-b-2 border-transparent font-medium text-sm py-3 hover:text-white tab-btn">Android</button>
  </div>
  <div class="flex flex-col gap-1 px-6 py-6 border-b border-white/10 bg-white/5">
    <div class="text-2xl sm:text-3xl text-white font-extrabold leading-tight tracking-tight">840,233</div>
    <div class="text-white/70 text-xs font-medium">Total Downloads</div>
  </div>
  <div class="flex flex-col divide-y divide-white/10">
    <div class="flex flex-col gap-1 px-6 py-5">
      <div class="flex justify-between items-end mb-1">
        <span class="text-white font-medium text-sm">Apple App Store</span>
        <span class="text-white/80 text-sm font-semibold">296,000</span>
      </div>
      <div class="h-2 bg-white/10 rounded-full overflow-hidden">
        <div class="bg-gradient-to-r from-blue-400 via-sky-400 to-white/30 h-full rounded-full" style="width: 58%"></div>
      </div>
    </div>
    <div class="flex flex-col gap-1 px-6 py-5">
      <div class="flex justify-between items-end mb-1">
        <span class="text-white font-medium text-sm">Google Play Store</span>
        <span class="text-white/80 text-sm font-semibold">545,120</span>
      </div>
      <div class="h-2 bg-white/10 rounded-full overflow-hidden">
        <div class="bg-gradient-to-r from-green-300 via-green-400 to-white/30 h-full rounded-full" style="width: 68%"></div>
      </div>
    </div>
    <div class="flex flex-col gap-1 px-6 py-5">
      <div class="flex justify-between items-end mb-1">
        <span class="text-white font-medium text-sm">Direct Download</span>
        <span class="text-white/80 text-sm font-semibold">15,230</span>
      </div>
      <div class="h-2 bg-white/10 rounded-full overflow-hidden">
        <div class="bg-gradient-to-r from-yellow-400 to-orange-400 h-full rounded-full" style="width: 18%"></div>
      </div>
    </div>
    <div class="flex flex-col gap-1 px-6 py-5">
      <div class="flex justify-between items-end mb-1">
        <span class="text-white font-medium text-sm">Other</span>
        <span class="text-white/80 text-sm font-semibold">2,883</span>
      </div>
      <div class="h-2 bg-white/10 rounded-full overflow-hidden">
        <div class="bg-gradient-to-r from-pink-400 to-fuchsia-500 h-full rounded-full" style="width: 7%"></div>
      </div>
    </div>
  </div>
  <script>
    document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.tab-btn').forEach(b => { b.classList.remove('active'); b.classList.add('text-white/60'); b.classList.remove('text-white', 'border-sky-400'); b.classList.add('border-transparent'); }); btn.classList.add('active'); btn.classList.remove('text-white/60', 'border-transparent'); btn.classList.add('text-white', 'border-sky-400'); }); });
  </script>
</div>