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>Compact music player with album art, animated equaliser bars, scrubber, elapsed/remaining time and play controls. Pure CSS keyframes drive the EQ pulse and the neon ring around the album art.
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.
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.
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.
546
Snippets
2629.8k
Views
86.3k
Downloads
Trending now
Trending Bootstrap snippets from the classic library.
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.