Glassmorphic Expense Tracking Card

<div class="relative overflow-hidden sm:p-8 border-white/5 border rounded-none pt-6 pr-6 pb-6 pl-6 max-w-xl"
  style="background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);">
  <!-- Corner accents -->
  <div class="pointer-events-none absolute left-1 top-1 w-3 h-3"
    style="border-top: 1px solid rgba(52,211,153,0.6); border-left: 1px solid rgba(52,211,153,0.6);"></div>
  <div class="pointer-events-none absolute right-1 top-1 w-3 h-3"
    style="border-top: 1px solid rgba(52,211,153,0.6); border-right: 1px solid rgba(52,211,153,0.6);"></div>
  <div class="pointer-events-none absolute left-1 bottom-1 w-3 h-3"
    style="border-bottom: 1px solid rgba(52,211,153,0.6); border-left: 1px solid rgba(52,211,153,0.6);"></div>
  <div class="pointer-events-none absolute right-1 bottom-1 w-3 h-3"
    style="border-bottom: 1px solid rgba(52,211,153,0.6); border-right: 1px solid rgba(52,211,153,0.6);"></div>

  <div class="absolute right-6 top-6 hidden sm:block">

  </div>

  <div class="relative">
    <div
      class="inline-flex gap-2 text-xs font-medium text-emerald-200 tracking-wide border-emerald-300/20 border mb-4 pt-1 pr-3 pb-1 pl-3 items-center font-sans"
      style="background: rgba(52, 211, 153, 0.1); backdrop-filter: blur(8px);">
      Real-time
    </div>
    <h3 class="text-2xl sm:text-3xl text-white mb-3 tracking-tighter font-semibold font-bricolage" style="">Expense
      Tracking</h3>
    <p class="text-neutral-400 sm:text-lg font-light mb-6 font-sans" style="">Monitor your spending in real-time with
      automatic bank synchronization and intelligent expense categorization.</p>

    <div class="sm:p-6 border-emerald-300/10 border rounded-none pt-4 pr-4 pb-4 pl-4 space-y-3"
      style="background: radial-gradient(120% 120% at 0% 0%, rgba(52,211,153,0.04) 0%, rgba(52,211,153,0.02) 35%, transparent 70%);">
      <div class="space-y-2">
        <span class="text-neutral-300 text-sm font-medium font-sans" style="">Food &amp; Dining</span>
        <div class="relative w-full h-3.5 rounded-full border border-emerald-300/20 overflow-hidden"
          style="background: linear-gradient(90deg, rgba(10,10,10,0.8) 0%, rgba(24,24,24,0.8) 100%);">
          <div class="relative h-full rounded-full" style="width:72%;">
            <div class="absolute inset-0 rounded-full"
              style="background: linear-gradient(90deg, rgba(52,211,153,0.25) 0%, rgba(16,185,129,0.65) 55%, rgba(52,211,153,0.95) 100%); box-shadow: 0 0 20px rgba(52,211,153,0.25) inset, 0 0 24px rgba(52,211,153,0.35);">
            </div>
            <span class="absolute right-1 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full" style="background: radial-gradient(50% 50% at 50% 50%, rgba(167,243,208,1) 0%, rgba(167,243,208,0.65) 60%, rgba(167,243,208,0) 100%); box-shadow: 0 0 12px rgba(167,243,208,0.8), 0 0 28px rgba(167,243,208,0.35);"></span>
          </div>
        </div>
      </div>

      <div class="space-y-2 pt-4">
        <span class="text-neutral-300 text-sm font-medium font-sans" style="">Transportation</span>
        <div class="relative w-full h-3.5 rounded-full border border-emerald-300/20 overflow-hidden"
          style="background: linear-gradient(90deg, rgba(10,10,10,0.8) 0%, rgba(24,24,24,0.8) 100%);">
          <div class="relative h-full rounded-full" style="width:45%;">
            <div class="absolute inset-0 rounded-full"
              style="background: linear-gradient(90deg, rgba(52,211,153,0.25) 0%, rgba(16,185,129,0.65) 55%, rgba(52,211,153,0.95) 100%); box-shadow: 0 0 20px rgba(52,211,153,0.25) inset, 0 0 24px rgba(52,211,153,0.35);">
            </div>
            <span class="absolute right-1 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full" style="background: radial-gradient(50% 50% at 50% 50%, rgba(167,243,208,1) 0%, rgba(167,243,208,0.65) 60%, rgba(167,243,208,0) 100%); box-shadow: 0 0 12px rgba(167,243,208,0.8), 0 0 28px rgba(167,243,208,0.35);"></span>
          </div>
        </div>
      </div>

      <div class="space-y-2 pt-4">
        <span class="text-neutral-300 text-sm font-medium font-sans" style="">Shopping</span>
        <div class="relative w-full h-3.5 rounded-full border border-emerald-300/20 overflow-hidden"
          style="background: linear-gradient(90deg, rgba(10,10,10,0.8) 0%, rgba(24,24,24,0.8) 100%);">
          <div class="relative h-full rounded-full" style="width:88%;">
            <div class="absolute inset-0 rounded-full"
              style="background: linear-gradient(90deg, rgba(52,211,153,0.25) 0%, rgba(16,185,129,0.65) 55%, rgba(52,211,153,0.95) 100%); box-shadow: 0 0 20px rgba(52,211,153,0.25) inset, 0 0 24px rgba(52,211,153,0.35);">
            </div>
            <span class="absolute right-1 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full" style="background: radial-gradient(50% 50% at 50% 50%, rgba(167,243,208,1) 0%, rgba(167,243,208,0.65) 60%, rgba(167,243,208,0) 100%); box-shadow: 0 0 12px rgba(167,243,208,0.8), 0 0 28px rgba(167,243,208,0.35);"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="pointer-events-none absolute inset-0 rounded-2xl"
    style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);"></div>
</div>