Every component below has a plain HTML and CSS version with no framework and no build step. Colours, sizes and spacing live in CSS custom properties at the top of each snippet, so restyling one is a matter of changing a few values.
Where a component genuinely needs JavaScript, it ships a few lines of vanilla JS; those marked "no JS" need none at all. Each component also exists in Bootstrap 5 and Tailwind CSS 4, one tab away on its page.
684 free plain CSS components, each with a live demo and copyable code.
Forms & inputs
Login forms 22
- Split-Screen Login Form no JS
- Floating Label Login Card
- Glassmorphism Login Form no JS
- Social Login Form no JS
- Animated Gradient Border Login no JS
- Magic Link Login Form
- Neobrutalist Login Form no JS
- SaaS Login Page with SSO
- Login and Sign-Up Tabs
- Terminal-Style Login Form no JS
- One-Time Code Input
- Two-Factor Code Form no JS
- Passkey Sign-In Form no JS
- Identifier-First Login Form
- Enterprise SSO Login Form no JS
- Phone Number Login Form no JS
- Session Lock Screen no JS
- Password Reset Request Form
- Login Form with Error States
- Background Image Login Form no JS
- Session Expired Login Modal
- Theme-Aware Login Form
Checkboxes & radios 8
- Basic Checkboxes no JS
- Checkbox States
- Checkbox Cards no JS
- Checkbox Lists no JS
- Basic Radio Buttons no JS
- Radio Button Cards no JS
- Dark Checkboxes & Radios no JS
- Custom Radio & Checkbox Marks no JS
Toggle switches 8
- Classic Toggle Switches no JS
- Labelled Toggle Switches no JS
- Day and Night Toggle Switches no JS
- Checkbox Toggles no JS
- Segmented Control Toggles no JS
- Soft Neumorphic Toggles no JS
- Dark Mode Toggle Switches no JS
- Playful Toggle Switches no JS
Content & data
Cards 22
- Profile Cards with Stats no JS
- Dark Blog Post Cards no JS
- Product Cards with Wishlist
- Three-Tier Pricing Cards no JS
- 3D Flip Cards no JS
- Glassmorphism Usage Cards no JS
- KPI Stat Cards with Sparklines no JS
- Testimonial Cards with Ratings no JS
- Hover Reveal Overlay Cards no JS
- Horizontal Media Cards no JS
- Event Card with Date Block no JS
- Notification Cards no JS
- File Upload Status Cards no JS
- Course Progress Card no JS
- Job Listing Card no JS
- Weather Forecast Card no JS
- Music Player Card
- Invoice Receipt Card no JS
- Kanban Task Cards no JS
- Expandable Details Cards no JS
- Skeleton Loading Card no JS
- Bento Grid Cards no JS
Tables & datatables 22
- Searchable Paginated Datatable
- Striped Table with Totals no JS
- Dark Service Status Table no JS
- Responsive Stacked Table no JS
- Sticky Header Table no JS
- Selectable Rows Table
- Expandable Rows Table
- Plan Comparison Table no JS
- Invoice Line Items Table no JS
- Minimal Hairline Table no JS
- Data Table Toolbar
- Sortable Table Headers
- Loading, Empty & Error Tables no JS
- Inline Editable Table Cells
- Frozen First Column Table no JS
- Grouped Rows with Subtotals
- Tree Table with Nested Rows
- Tables with Inline Charts no JS
- Table Row Actions and Bulk Bar
- Table Pagination Patterns no JS
- Resizable Table Columns
- Reorderable Table Rows
Accordions 8
- Basic Accordions no JS
- Accordion Open/Close Markers no JS
- FAQ Accordion Layouts no JS
- Exclusive Accordion no JS
- Rich Accordion Panels no JS
- Nested Accordion and Sidebar no JS
- Dark Accordions no JS
- Animated Accordions no JS
Timelines 22
- Vertical Alternating Timeline no JS
- Minimal Release Notes Timeline no JS
- Dark Product Roadmap Timeline no JS
- Activity Feed Timeline no JS
- Horizontal Steps Timeline no JS
- Scrolling History Timeline no JS
- Quarterly Roadmap Timeline no JS
- Milestone Cards Timeline no JS
- Gradient Glow Timeline no JS
- Resume Experience Timeline no JS
- Gantt Chart Timeline no JS
- Horizontal Media Timeline no JS
- Horizontal-to-Vertical Timeline no JS
- Icon Process Timeline no JS
- Compact Inline Timelines no JS
- Decade Axis Timeline no JS
- Grouped Changelog Timeline no JS
- Scroll-Filled Spine Timeline no JS
- Delivery Tracking Timeline no JS
- Discussion Thread Timeline no JS
- Alternating Icon Timeline no JS
- Audit Log Timeline no JS
Calendars 22
- Month Grid Calendar with Events
- Mini Picker Calendar
- Dark Event Calendar
- Week Schedule Calendar no JS
- Agenda List Calendar no JS
- Year Overview Calendar
- Booking Range Calendar
- Glass Widget Calendar
- Printable Planner Calendar
- Calendar with Events Sidebar
- Date Picker Input
- Appointment Time Slot Picker
- Activity Heatmap Calendar no JS
- Day View Calendar with Now Line
- Quarter View Calendar no JS
- Resource Scheduling Calendar no JS
- Calendar with Day Detail Panel no JS
- Compact Dashboard Calendar no JS
- Weekly Availability Picker no JS
- Event Countdown Card
- Recurring Event Preview no JS
- Mobile Agenda List no JS
UI elements
CSS arrows 8
- CSS Arrow Shapes no JS
- Scroll Down Arrow Indicators no JS
- Arrow Buttons and Links no JS
- Rotating Chevron Arrows
- Process Flow Arrows no JS
- Hand-Drawn SVG Arrows no JS
- Dark Arrow Designs no JS
- Modern CSS Arrows no JS
App UI
Page sections
Design-style kits
Commerce
Media
Feedback & overlays
Effects & visuals
Buttons 22
- Gradient Buttons no JS
- 3D Pressable Buttons no JS
- Ghost Outline Buttons no JS
- Icon Buttons and Like Toggle
- Loading Spinner Buttons
- Neon Glow Buttons no JS
- Neobrutalist Buttons no JS
- Social Login Buttons no JS
- Pill Buttons no JS
- Shine and Sweep Buttons no JS
- Buttons with Moving Icons no JS
- Segmented Button Controls no JS
- Split Action Buttons no JS
- Button Size Scale no JS
- Button States Reference no JS
- State-Change Buttons
- Animated Border Buttons no JS
- Text and Link Buttons no JS
- Button Groups and Toolbars
- Marketing CTA Buttons no JS
- Frosted Glass Buttons no JS
- Expanding Icon Buttons no JS