Auto-rotating testimonial slider with a soft cross-fade, gradient avatar rings and indicator dots. Pause on hover, manual nav via arrows or dots.
1function App() {
2 const items = [
3 { name: "Maya Devi", role: "Senior Engineer · Stripe", quote: "Cut our component-build time in half. The custom-CSS tab is what closed the deal for our design team.", initials: "MD", gradient: "linear-gradient(135deg,#22d3ee,#a855f7)" },
4 { name: "Surya Ramesh", role: "Product Lead · Linear", quote: "The fastest preview iframe I've used. We replaced our internal docs site with this in one afternoon.", initials: "SR", gradient: "linear-gradient(135deg,#f472b6,#6366f1)" },
5 { name: "Lin Park", role: "Indie Founder · Atelier", quote: "Beautiful by default. Even my first throwaway prototype looked like a production landing page.", initials: "LP", gradient: "linear-gradient(135deg,#34d399,#06b6d4)" },
6 { name: "Jamie Okafor", role: "Design Engineer · Vercel", quote: "Bento and gallery components are world-class. Holographic shimmer is *chef's kiss*.", initials: "JO", gradient: "linear-gradient(135deg,#fbbf24,#f472b6)" },
7 ];
8 const [i, setI] = React.useState(0);
9 const [paused, setPaused] = React.useState(false);
10
11 React.useEffect(() => {
12 if (paused) return;
13 const t = setInterval(() => setI((v) => (v + 1) % items.length), 4500);
14 return () => clearInterval(t);
15 }, [paused, items.length]);
16
17 const current = items[i];
18
19 return (
20 <section className="testi-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
21 <span className="testi-orb orb-a" />
22 <span className="testi-orb orb-b" />
23
24 <div className="relative w-full max-w-2xl">
25 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-5 testi-pill">Loved by builders</span>
26 <div className="testi-card relative rounded-3xl p-8 sm:p-10 overflow-hidden" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
27 <svg className="absolute top-7 right-7 w-10 h-10 text-white/10" viewBox="0 0 24 24" fill="currentColor"><path d="M9 7H5.5a3.5 3.5 0 100 7H7v3a3 3 0 003 3v-3.5a6 6 0 00-1-10.5zm9 0h-3.5a3.5 3.5 0 100 7H16v3a3 3 0 003 3v-3.5a6 6 0 00-1-10.5z" /></svg>
28 <div key={i} className="testi-fade">
29 <p className="text-white text-lg sm:text-xl leading-snug font-medium tracking-tight mb-7">"{current.quote}"</p>
30 <div className="flex items-center gap-3">
31 <span className="testi-avatar" style={{ background: current.gradient }}>{current.initials}</span>
32 <div>
33 <p className="text-white font-semibold text-[14px]">{current.name}</p>
34 <p className="text-slate-300/65 text-[12px]">{current.role}</p>
35 </div>
36 </div>
37 </div>
38 </div>
39
40 <div className="flex items-center justify-between mt-5">
41 <div className="flex items-center gap-2">
42 {items.map((_, idx) => (
43 <button key={idx} type="button" onClick={() => setI(idx)} aria-label={`Slide ${idx + 1}`} className={`testi-dot ${idx === i ? "is-active" : ""}`} />
44 ))}
45 </div>
46 <div className="flex items-center gap-2">
47 <button type="button" onClick={() => setI((v) => (v - 1 + items.length) % items.length)} className="testi-nav"><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 19l-7-7 7-7" /></svg></button>
48 <button type="button" onClick={() => setI((v) => (v + 1) % items.length)} className="testi-nav"><svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg></button>
49 </div>
50 </div>
51 </div>
52 </section>
53 );
54}
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.