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>
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.
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.
Profile skill panel where each progress bar fills from 0 to its value with an eased animation. Each bar's gradient is tinted to match the skill level.
Dashboard-style sidebar that smoothly collapses from a 240px expanded state to a 64px icon rail. Active item glow, hover highlight, group separators.
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.