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.
1function App() {
2 const [stats, setStats] = React.useState({ users: 12480, revenue: 86420, sessions: 24917 });
3 const [pulseKey, setPulseKey] = React.useState(0);
4
5 const randomise = React.useCallback(() => {
6 setStats({
7 users: Math.floor(8000 + Math.random() * 20000),
8 revenue: Math.floor(40000 + Math.random() * 120000),
9 sessions: Math.floor(10000 + Math.random() * 40000),
10 });
11 setPulseKey((k) => k + 1);
12 }, []);
13
14 const tiles = [
15 { id: "users", label: "Active users", value: stats.users, delta: "+12.4%", accent: "#22d3ee", icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" },
16 { id: "revenue", label: "Net revenue", value: stats.revenue, delta: "+5.8%", accent: "#a855f7", icon: "M12 8c-1.66 0-3 .9-3 2s1.34 2 3 2 3 .9 3 2-1.34 2-3 2m0-8v2m0 8v2M5 12a7 7 0 1014 0 7 7 0 00-14 0z" },
17 { id: "sessions", label: "Sessions today", value: stats.sessions, delta: "+18.2%", accent: "#f472b6", icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" },
18 ];
19
20 return (
21 <div className="aurora-stage min-h-screen flex items-center justify-center px-4 py-12 overflow-hidden">
22 <span className="orb orb-a" />
23 <span className="orb orb-b" />
24 <span className="orb orb-c" />
25
26 <div className="relative w-full max-w-3xl">
27 <div className="glass-card rounded-3xl p-7 sm:p-9 shadow-[0_25px_80px_-20px_rgba(2,6,23,0.65)]">
28 <div className="flex flex-wrap items-end justify-between gap-4 mb-7">
29 <div>
30 <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-cyan-200/80 mb-1.5">Live overview</p>
31 <h1 className="text-white font-extrabold leading-tight tracking-tight" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)" }}>
32 Aurora Analytics
33 </h1>
34 </div>
35 <button
36 type="button"
37 onClick={randomise}
38 className="cta-btn inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-white text-[13px] font-semibold"
39 >
40 <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
41 <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8 8 0 1 0 4.5 8.5M20 20v-5h-.581" />
42 </svg>
43 Randomise
44 </button>
45 </div>
46
47 <div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5" key={pulseKey}>
48 {tiles.map((t) => (
49 <div key={t.id} className="stat-tile relative rounded-2xl p-4 overflow-hidden" style={{ "--accent": t.accent }}>
50 <span className="pulse-ring" aria-hidden="true" />
51 <div className="relative flex items-center gap-2 mb-3">
52 <span className="inline-flex items-center justify-center w-7 h-7 rounded-lg" style={{ background: t.accent + "22", border: "1px solid " + t.accent + "55" }}>
53 <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke={t.accent} strokeWidth={2}>
54 <path strokeLinecap="round" strokeLinejoin="round" d={t.icon} />
55 </svg>
56 </span>
57 <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-200/70">{t.label}</span>
58 </div>
59 <p className="relative text-white font-black text-[28px] sm:text-[30px] leading-none tracking-tight">
60 {t.value.toLocaleString()}
61 </p>
62 <p className="relative mt-2 text-[11px] font-semibold inline-flex items-center gap-1" style={{ color: t.accent }}>
63 <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M7 14l5-5 5 5z" /></svg>
64 {t.delta} vs. last week
65 </p>
66 </div>
67 ))}
68 </div>
69
70 <p className="mt-7 text-center text-[11px] text-slate-300/55">
71 Click <span className="text-white font-semibold">Randomise</span> — each tile re-runs the pulse animation independently.
72 </p>
73 </div>
74 </div>
75 </div>
76 );
77}
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
Animated drop zone with drag-over glow, queued file thumbnails, per-file progress bars that auto-fill, and a successful-state checkmark. Click "Browse" or drop files anywhere on the zone.
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
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.
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.