Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
1<div class="aurora-stage min-h-screen flex items-center justify-center px-4 py-12 overflow-hidden">
2 <span class="orb orb-a"></span>
3 <span class="orb orb-b"></span>
4 <span class="orb orb-c"></span>
5
6 <div class="relative w-full max-w-md">
7 <div class="absolute -inset-px rounded-3xl bg-gradient-to-br from-fuchsia-400/60 via-violet-400/40 to-cyan-300/50 blur opacity-70"></div>
8 <div class="glass-card relative rounded-3xl p-8 sm:p-10 shadow-[0_20px_60px_-15px_rgba(2,6,23,0.55)]">
9 <div class="flex items-center justify-between mb-7">
10 <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] text-fuchsia-100" style="background:rgba(244,114,182,0.18);border:1px solid rgba(244,114,182,0.45)">
11 <span class="w-1.5 h-1.5 rounded-full bg-fuchsia-300 animate-pulse"></span>
12 Most popular
13 </span>
14 <svg class="w-7 h-7 text-fuchsia-200/80" fill="none" stroke="currentColor" stroke-width="1.6">
15 <path stroke-linecap="round" stroke-linejoin="round" d="M12 2l2.39 6.96H22l-6.18 4.49L18.21 22 12 17.27 5.79 22l2.39-8.55L2 8.96h7.61z"></path>
16 </svg>
17 </div>
18
19 <h2 class="font-bold text-white text-[28px] sm:text-[32px] leading-tight tracking-tight mb-1.5">Atmosphere</h2>
20 <p class="text-sm leading-relaxed text-slate-200/75 mb-7">For solo founders and indie teams who care about every pixel.</p>
21
22 <div class="flex items-baseline gap-2 mb-7">
23 <span class="text-5xl sm:text-6xl font-black text-white tracking-tight">$24</span>
24 <span class="text-sm font-medium text-slate-300/80">/ month</span>
25 </div>
26
27 <ul class="space-y-3 mb-9">
28 <li class="flex items-center gap-3 text-[13.5px] text-slate-100/90">
29 <span class="inline-flex items-center justify-center w-5 h-5 rounded-full" style="background:rgba(134,239,172,0.20);border:1px solid rgba(134,239,172,0.45)">
30 <svg class="w-3 h-3 text-emerald-300" fill="none" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
31 </span>
32 Unlimited components & templates
33 </li>
34 <li class="flex items-center gap-3 text-[13.5px] text-slate-100/90">
35 <span class="inline-flex items-center justify-center w-5 h-5 rounded-full" style="background:rgba(134,239,172,0.20);border:1px solid rgba(134,239,172,0.45)">
36 <svg class="w-3 h-3 text-emerald-300" fill="none" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
37 </span>
38 Real-time collaboration
39 </li>
40 <li class="flex items-center gap-3 text-[13.5px] text-slate-100/90">
41 <span class="inline-flex items-center justify-center w-5 h-5 rounded-full" style="background:rgba(134,239,172,0.20);border:1px solid rgba(134,239,172,0.45)">
42 <svg class="w-3 h-3 text-emerald-300" fill="none" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
43 </span>
44 Custom branding & theming
45 </li>
46 <li class="flex items-center gap-3 text-[13.5px] text-slate-100/90">
47 <span class="inline-flex items-center justify-center w-5 h-5 rounded-full" style="background:rgba(134,239,172,0.20);border:1px solid rgba(134,239,172,0.45)">
48 <svg class="w-3 h-3 text-emerald-300" fill="none" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
49 </span>
50 Priority support & onboarding
51 </li>
52 </ul>
53
54 <button type="button" class="cta-btn group w-full inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3.5 font-semibold text-white text-[14px] tracking-wide">
55 Start free 14-day trial
56 <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
57 </button>
58
59 <p class="text-center text-[11px] mt-4 text-slate-300/55">No credit card required · cancel anytime</p>
60 </div>
61 </div>
62</div>
Split SaaS hero with bold gradient headline, two CTAs, social-proof logo strip and a tilted browser mockup preview floating to the right. Built for landings.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.