Button Variants
All states: default, hover, active, loading, and disabled.
Toggles & Sliders
Click to toggle state. Drag to adjust values.
Tabs
Switch between panels without a page reload.
function switchTab(btn, id) {
document.querySelectorAll('.tab-btn')
.forEach(b => b.classList.remove('active'));
document.querySelectorAll('.tab-panel')
.forEach(p => p.classList.remove('active'));
btn.classList.add('active');
document.getElementById(id).classList.add('active');
}
Accordion
Smooth expand/collapse with CSS max-height transitions.
A collection of interactive demos built with plain HTML, CSS, and JavaScript — no frameworks. It exists to demonstrate real skills, not just talk about them.
Because knowing the platform makes you better at using abstractions on top of it. Every toggle here works purely on class manipulation and CSS transitions.
CSS max-height transition from 0 to a safe large value. No JavaScript height calculations needed — just a class toggle.
Badges & Cards
Status indicators and content cards.
Input Fields
Focus states, validation, and helper text.
Modal & Toast Notifications
Trigger overlays with accessible focus trapping and smooth transitions.