#0f0a1f
1<div class="relative grid h-[200px] w-[200px] place-items-center">2 <div class="absolute left-0 top-2 size-24 rounded-full bg-fuchsia-500 blur-xl animate-[bolha_7s_ease-in-out_infinite] motion-reduce:animate-none"></div>3 <div class="absolute bottom-2 right-0 size-28 rounded-full bg-sky-400 blur-xl animate-[bolha_9s_ease-in-out_infinite_reverse] motion-reduce:animate-none"></div>4 <div class="absolute bottom-10 left-8 size-14 rounded-full bg-amber-300 blur-lg animate-[bolha_6s_ease-in-out_infinite] motion-reduce:animate-none"></div>5 <div class="relative w-44 rounded-2xl border border-white/25 bg-white/10 p-4 text-white shadow-2xl shadow-black/40 backdrop-blur-xl transition hover:bg-white/15">6 <div class="flex items-center justify-between">7 <span class="text-[11px] font-medium uppercase tracking-widest text-white/70">Saldo</span>8 <span class="grid size-7 place-items-center rounded-full bg-white/20 text-xs">↗</span>9 </div>10 <p class="mt-3 text-2xl font-bold tracking-tight">R$ 4.280<span class="text-base text-white/60">,90</span></p>11 <p class="mt-1 text-xs text-white/60">Conta corrente</p>12 <div class="mt-4 flex gap-2">13 <button class="flex-1 rounded-lg bg-white py-1.5 text-xs font-semibold text-slate-900 transition hover:bg-white/85">Pagar</button>14 <button class="flex-1 rounded-lg border border-white/30 py-1.5 text-xs font-semibold transition hover:bg-white/10">Extrato</button>15 </div>16 </div>17</div>