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.
1function App() {
2 const [trigger, setTrigger] = React.useState(0);
3 const skills = [
4 { name: "React + Next.js", value: 96, tint: "#22d3ee" },
5 { name: "Tailwind CSS", value: 92, tint: "#06b6d4" },
6 { name: "TypeScript", value: 88, tint: "#a855f7" },
7 { name: "System Design", value: 78, tint: "#f472b6" },
8 { name: "Motion / Animation", value: 84, tint: "#fbbf24" },
9 { name: "Accessibility", value: 72, tint: "#34d399" },
10 ];
11
12 return (
13 <section className="skill-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
14 <span className="skill-orb orb-a" />
15 <span className="skill-orb orb-b" />
16
17 <div className="relative w-full max-w-2xl">
18 <div className="skill-card rounded-3xl p-7 sm:p-9">
19 <div className="flex flex-wrap items-end justify-between gap-3 mb-7">
20 <div>
21 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-3 skill-pill">Front-end · 6 yrs</span>
22 <h2 className="text-white font-bold leading-tight tracking-tight" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)" }}>Riya's stack</h2>
23 <p className="text-slate-300/65 text-[13px] mt-1">Click <span className="text-white font-semibold">Replay</span> to re-run the fill animation.</p>
24 </div>
25 <button type="button" onClick={() => setTrigger((t) => t + 1)} className="skill-replay inline-flex items-center gap-2 rounded-full px-4 py-2 text-white text-[12.5px] font-semibold">
26 <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8 8 0 1 0 4.5 8.5M20 20v-5h-.581" /></svg>
27 Replay
28 </button>
29 </div>
30 <div className="space-y-4" key={trigger}>
31 {skills.map((s, i) => (
32 <div key={s.name}>
33 <div className="flex items-center justify-between mb-1.5">
34 <span className="text-white text-[13.5px] font-semibold">{s.name}</span>
35 <span className="text-[12px] font-bold tracking-tight" style={{ color: s.tint }}>{s.value}%</span>
36 </div>
37 <div className="skill-track">
38 <span className="skill-fill" style={{ "--v": s.value + "%", "--tint": s.tint, animationDelay: i * 90 + "ms" }} />
39 </div>
40 </div>
41 ))}
42 </div>
43 </div>
44 </div>
45 </section>
46 );
47}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.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
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.
Spotlight-style command palette with live keystroke filtering, keyboard hint chips and grouped results. Backdrop blurs the page below for focus.
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
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.
579
Snippets
2630.9k
Views
86.3k
Downloads
Trending now
Trending Bootstrap snippets from the classic library.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.