Copy-paste UI components

Free HTML, CSS and JavaScript components for Bootstrap 5, Tailwind CSS and pure CSS. Preview live, copy the code, ship faster.

Bootstrap 5 Tailwind CSS Pure CSS

Browse by category

All 205 components

Latest components

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

Animated Gradient Background

Pure CSS hero section with a slowly shifting multi-color gradient, drifting blurred blobs and a grain overlay, customizable through CSS variables.

Pure CSS Backgrounds

Image Hover Effects

Six pure CSS image hover effects with captions: zoom, grayscale to color, sliding panel, tilt, blur and frame, also revealed by keyboard focus.

Pure CSS Hover Effects

Animated Gradient Text

Pure CSS animated gradient text for headings using background-clip, with four palettes, a shine sweep variant, a CSS-only pause switch and a fallback color.

Pure CSS Text Effects

Typing Text Effect

Pure CSS typewriter effect with a blinking caret, using steps() and ch units on a monospace headline and a retro terminal window with replay.

Pure CSS Text Effects

Music Player Card

Dark music player card with a spinning vinyl cover, seek bar, play, skip, shuffle and repeat controls, volume slider and a clickable playlist.

Pure CSS Music Players

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.