Copy-paste UI components

Compact month calendar generated with vanilla JS and styled with pure CSS: selectable days, today marker, month navigation and full arrow-key support.

Pure CSS Calendars

Animated To-Do Checklist

Dark to-do checklist in pure CSS with self-drawing check marks, an animated strike-through, a progress bar and vanilla JS to add and clear tasks.

Pure CSS Lists

Glassmorphism Card

Frosted glass profile card in Tailwind CSS with backdrop blur, a light reflection and a follow button over colorful animated gradient blobs.

Tailwind CSS Cards

Dark Footer with App Badges

Dark Tailwind CSS footer with four link columns, App Store and Google Play badges, and a language select that remembers the choice.

Tailwind CSS Footers

Simple Centered Footer

Minimal centered footer in pure CSS with a logo, tagline, links with animated underlines, round icon links and an auto-updating copyright year.

Pure CSS Footers

Page Header with Stats

Tailwind CSS dashboard page header with breadcrumb, project meta info, action buttons and stat chips that update with a date range switch.

Tailwind CSS Headers

Inline Newsletter Form

Compact pure CSS newsletter signup with a pill email field, an animated subscribe button and loading, error and success states.

Pure CSS Newsletter Sections

Feature Cards with Hover Glow

Dark pure CSS feature grid whose card borders and backgrounds light up with a colored glow that follows the mouse pointer.

Pure CSS Feature Sections

Bottom Navigation with Center Action Button

Pure CSS mobile tab bar with a curved notch, a raised gradient center button and three quick actions that fan out when it is tapped.

Pure CSS Bottom Navigation

Icon Sidebar that Expands on Hover

Pure CSS icon rail that widens to reveal labels, section headings and a profile on hover or keyboard focus, with an active link and badge.

Pure CSS Sidebars

Wave Section Dividers

Pure CSS and inline SVG section dividers with wave, layered wave, curve and tilt shapes that inherit the next section's color and stretch to any width.

Pure CSS Shapes & Dividers

Scroll Reveal Animations

Elements fade, slide, zoom or flip into view on scroll using IntersectionObserver and data-sr attributes, with stagger delays and reduced-motion support.

Pure CSS Scroll Animations

Most copied

Sortable Data Table

Tailwind CSS data table with clickable column headers that sort text, dates and numbers, with aria-sort, arrow indicators and a responsive scroll wrapper.

Tailwind CSS Tables

What is WebDevSnippets?

WebDevSnippets is a free library of ready-to-use UI components for web developers. Every component is plain HTML, CSS and vanilla JavaScript, built for Bootstrap 5, Tailwind CSS or pure CSS, so it drops into any project and any stack without a build step or extra dependencies.

The library covers the parts every website needs: navigation bars, hero sections, cards, forms, pricing tables, modals, footers and e-commerce blocks, as well as complete page templates for homepages, about, services, contact and pricing pages. New components are added every day.

How it works

Find a component by category or with the search box.
Check the live preview, or open it full screen in a new tab.
Copy the HTML, CSS and JavaScript and adjust colors and text to fit your design.

All components are free for personal and commercial projects, including client work; see the license. For colors, the free developer tools include a color picker, palette generator, tints and shades and a WCAG contrast checker.