Click the action button — notifications slide in from the top-right, stack with subtle scale, then dismiss themselves. Five tones, randomised on each click.
1function App() {
2 const [items, setItems] = React.useState([]);
3 const seqRef = React.useRef(0);
4 const TONES = [
5 { id:"success", title:"Deploy complete", body:"Production rolled out in 24s.", icon:"M5 13l4 4L19 7", color:"#34d399" },
6 { id:"info", title:"New comment", body:"Jamie commented on your snippet.", icon:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.86 9.86 0 01-4-.8L3 20l1.2-3.6A8 8 0 1121 12z", color:"#22d3ee" },
7 { id:"warn", title:"High traffic", body:"API hit 92% of its hourly quota.", icon:"M12 9v2m0 4h.01M5 19h14a2 2 0 001.84-2.75L13.74 4a2 2 0 00-3.48 0L3.16 16.25A2 2 0 005 19z", color:"#fbbf24" },
8 { id:"reward", title:"Trending now", body:"Your component is in the Top 10.", icon:"M12 15v2m-6 4h12a2 2 0 002-2v-7a2 2 0 00-2-2H6a2 2 0 00-2 2v7a2 2 0 002 2zm10-12V7a4 4 0 00-8 0v4h8z", color:"#a855f7" },
9 { id:"sale", title:"New subscriber", body:"Lin upgraded to Pro Yearly.", icon:"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z", color:"#f472b6" },
10 ];
11
12 const push = React.useCallback(() => {
13 const tone = TONES[Math.floor(Math.random() * TONES.length)];
14 const id = ++seqRef.current;
15 setItems((cur) => [{ id, ...tone, ts: Date.now() }, ...cur].slice(0, 4));
16 setTimeout(() => {
17 setItems((cur) => cur.filter((n) => n.id !== id));
18 }, 4500);
19 }, []);
20
21 React.useEffect(() => { push(); const t = setTimeout(push, 600); return () => clearTimeout(t); }, [push]);
22
23 return (
24 <section className="toast-stage min-h-screen relative overflow-hidden flex items-center justify-center px-4">
25 <span className="toast-orb orb-a" />
26 <span className="toast-orb orb-b" />
27
28 <div className="relative w-full max-w-2xl text-center">
29 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-4 toast-pill">Live</span>
30 <h1 className="text-white font-bold leading-tight tracking-tight mb-3" style={{ fontSize: "clamp(1.75rem, 4vw, 2.5rem)" }}>Real-time activity stream</h1>
31 <p className="text-slate-300/70 text-sm sm:text-base leading-relaxed max-w-lg mx-auto mb-7">Toasts slide in from the corner, stack with a subtle scale, then dismiss themselves.</p>
32 <button type="button" onClick={push} className="toast-cta inline-flex items-center gap-2 rounded-full px-6 py-3 text-white font-semibold text-[13.5px]">
33 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
34 Send a notification
35 </button>
36 </div>
37
38 <div className="toast-tray">
39 {items.map((n, i) => (
40 <div key={n.id} className="toast-item" style={{ "--accent": n.color, "--depth": i }}>
41 <span className="toast-icon" style={{ background: n.color + "22", color: n.color, borderColor: n.color + "55" }}>
42 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d={n.icon} /></svg>
43 </span>
44 <div className="min-w-0">
45 <p className="text-white font-semibold text-[13.5px]">{n.title}</p>
46 <p className="text-slate-300/75 text-[12px] mt-0.5">{n.body}</p>
47 </div>
48 </div>
49 ))}
50 </div>
51 </section>
52 );
53}
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.