Glassy Stats Card

Live Preview
<div class="max-w-xs glass-card p-10 rounded-[3rem] text-white shadow-2xl relative overflow-hidden">
        <div class="absolute -top-20 -right-20 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
        <div class="text-rose-100 font-bold uppercase tracking-[0.2em] text-[10px] mb-6">Total Revenue</div>
        <div class="text-5xl font-black mb-8">$84,232</div>
        <div class="h-1.5 bg-white/20 rounded-full mb-8 overflow-hidden">
            <div class="h-full bg-white w-3/4 shadow-[0_0_20px_white]"></div>
        </div>
        <div class="flex justify-between items-center text-xs font-semibold">
            <span class="opacity-80">Target: $100k</span>
            <span class="bg-white/20 px-3 py-1 rounded-full font-bold">+12.5%</span>
        </div>
    </div>

Related components

More items from the merged UI library.

View all