Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.
1<section class="holo2-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
2 <span class="holo2-orb orb-a"></span>
3 <span class="holo2-orb orb-b"></span>
4
5 <div class="relative w-full max-w-5xl">
6 <header class="text-center mb-10">
7 <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-4 holo2-pill">Last 7 days</span>
8 <h2 class="font-bold text-white leading-tight tracking-tight" style="font-size:clamp(1.75rem,4vw,2.5rem)">Realtime overview</h2>
9 </header>
10
11 <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
12 <article class="holo2-card relative rounded-2xl p-5 overflow-hidden">
13 <div class="relative flex items-center justify-between mb-3">
14 <span class="holo2-tag text-[10px] font-bold uppercase tracking-[0.14em]">Revenue</span>
15 <span class="holo2-delta inline-flex items-center gap-1 text-[10.5px] font-bold uppercase tracking-[0.14em] px-2 py-0.5 rounded-full">
16 <svg class="w-3 h-3" fill="currentColor"><path d="M7 14l5-5 5 5z"></path></svg>
17 +12.4%
18 </span>
19 </div>
20 <p class="relative text-white font-black text-[34px] leading-none tracking-tight mb-3">$48,210</p>
21 <svg class="relative w-full h-12"><polyline points="0,30 12,26 24,28 36,18 48,22 60,10 72,14 84,6 96,8" fill="none" stroke="#67e8f9" stroke-width="2"></polyline><polyline points="0,30 12,26 24,28 36,18 48,22 60,10 72,14 84,6 96,8 96,40 0,40" fill="rgba(34,211,238,0.18)"></polyline></svg>
22 </article>
23 <article class="holo2-card relative rounded-2xl p-5 overflow-hidden">
24 <div class="relative flex items-center justify-between mb-3">
25 <span class="holo2-tag text-[10px] font-bold uppercase tracking-[0.14em]">Active users</span>
26 <span class="holo2-delta inline-flex items-center gap-1 text-[10.5px] font-bold uppercase tracking-[0.14em] px-2 py-0.5 rounded-full">
27 <svg class="w-3 h-3" fill="currentColor"><path d="M7 14l5-5 5 5z"></path></svg>
28 +5.8%
29 </span>
30 </div>
31 <p class="relative text-white font-black text-[34px] leading-none tracking-tight mb-3">12,890</p>
32 <svg class="relative w-full h-12"><polyline points="0,22 12,24 24,18 36,20 48,14 60,18 72,10 84,12 96,4" fill="none" stroke="#d8b4fe" stroke-width="2"></polyline><polyline points="0,22 12,24 24,18 36,20 48,14 60,18 72,10 84,12 96,4 96,40 0,40" fill="rgba(168,85,247,0.18)"></polyline></svg>
33 </article>
34 <article class="holo2-card relative rounded-2xl p-5 overflow-hidden">
35 <div class="relative flex items-center justify-between mb-3">
36 <span class="holo2-tag text-[10px] font-bold uppercase tracking-[0.14em]">Conversion</span>
37 <span class="holo2-delta is-down inline-flex items-center gap-1 text-[10.5px] font-bold uppercase tracking-[0.14em] px-2 py-0.5 rounded-full">
38 <svg class="w-3 h-3" fill="currentColor"><path d="M17 10l-5 5-5-5z"></path></svg>
39 -1.2%
40 </span>
41 </div>
42 <p class="relative text-white font-black text-[34px] leading-none tracking-tight mb-3">3.42%</p>
43 <svg class="relative w-full h-12"><polyline points="0,12 12,18 24,14 36,20 48,18 60,24 72,22 84,28 96,30" fill="none" stroke="#f9a8d4" stroke-width="2"></polyline><polyline points="0,12 12,18 24,14 36,20 48,18 60,24 72,22 84,28 96,30 96,40 0,40" fill="rgba(244,114,182,0.18)"></polyline></svg>
44 </article>
45 </div>
46 </div>
47</section>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.
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-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Glassmorphic sign-up form on a slowly morphing liquid blob background. Animated focus rings on inputs and a candy-gradient primary action.
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.