Can I copy "Glassmorphism Revenue Card" into my project?

Yes. Community Tailwind components on GoSnippets are MIT licensed unless noted otherwise on the page.

Glassmorphism Revenue Card — Free Tailwind CSS Component

Loading…

1<section class="b1s11-stage min-h-screen px-4 sm:px-8 py-14 sm:py-16 relative overflow-hidden flex items-center"> 2 <span class="b1s11-orb b1s11-orb-a"></span> 3 <span class="b1s11-orb b1s11-orb-b"></span> 4 <span class="b1s11-mesh"></span> 5 6 <div class="relative w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-stretch"> 7 <div class="lg:col-span-7 b1s11-panel rounded-3xl p-6 sm:p-8"> 8 <span class="b1s11-pill inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-5"> 9 <span class="w-1.5 h-1.5 rounded-full bg-cyan-300 animate-pulse"></span>GLASS 10 </span> 11 <h2 class="text-white font-bold leading-tight tracking-tight mb-3" style="font-size:clamp(1.6rem,4vw,2.8rem)"> 12 Glassmorphism Revenue Card 13 </h2> 14 <p class="text-slate-300/80 text-sm sm:text-base leading-relaxed max-w-2xl mb-7">Frosted surfaces with soft glow. Layered glass aesthetics.</p> 15 <div class="grid grid-cols-1 sm:grid-cols-3 gap-3"> 16 <article class="b1s11-tile rounded-2xl p-4"><p class="text-[11px] uppercase tracking-[0.14em] text-slate-400 mb-2">Velocity</p><p class="text-white font-black text-2xl">83%</p><p class="text-emerald-300/80 text-[11px] mt-1">+6.2%</p></article> 17 <article class="b1s11-tile rounded-2xl p-4"><p class="text-[11px] uppercase tracking-[0.14em] text-slate-400 mb-2">Satisfaction</p><p class="text-white font-black text-2xl">91%</p><p class="text-cyan-300/80 text-[11px] mt-1">NPS +19</p></article> 18 <article class="b1s11-tile rounded-2xl p-4"><p class="text-[11px] uppercase tracking-[0.14em] text-slate-400 mb-2">Reliability</p><p class="text-white font-black text-2xl">99.3%</p><p class="text-fuchsia-300/80 text-[11px] mt-1">SLA protected</p></article> 19 </div> 20 <div class="mt-7 flex flex-wrap gap-3"> 21 <a href="#" class="b1s11-cta inline-flex items-center gap-2 rounded-2xl px-5 py-3 text-[13.5px] font-semibold text-white">Explore component</a> 22 <a href="#" class="b1s11-ghost inline-flex items-center gap-2 rounded-2xl px-5 py-3 text-[13.5px] font-semibold text-white">View docs</a> 23 </div> 24 </div> 25 26 <aside class="lg:col-span-5 b1s11-side rounded-3xl p-5 sm:p-6"> 27 <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-400 mb-3">Live preview</p> 28 <div class="b1s11-preview rounded-2xl p-4 sm:p-5"> 29 <div class="flex items-center justify-between mb-4"> 30 <p class="text-white font-semibold text-sm">glass module</p> 31 <span class="text-[10px] px-2 py-0.5 rounded-full b1s11-dot">active</span> 32 </div> 33 <div class="space-y-2.5"> 34 <div class="b1s11-line" style="width:88%"></div> 35 <div class="b1s11-line" style="width:72%"></div> 36 <div class="b1s11-line" style="width:94%"></div> 37 <div class="b1s11-line" style="width:66%"></div> 38 </div> 39 </div> 40 </aside> 41 </div> 42</section>

Glassmorphism Revenue Card

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

Related Tailwind components

Glassmorphism Bento Grid SaaS Dashboard Card

Aurora Glass Pricing Card

Nebula Hero for AI Studio

Liquid Glass Sign-Up Form

Comments(0)

Prefer Bootstrap? Browse our Bootstrap 5 snippets

Ocean Depth Dashboard with Synthwave KPI & Active Feed

Electric Forest Data Insights Dashboard with Hoverable KPI Tiles

Deep Space Neon Form with Kinetic Validation Feedback