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 215 components

Latest components

Toast with Progress Bar

Stacked toast notifications with a CSS countdown progress bar that pauses on hover or focus and closes the toast when it runs out.

Pure CSS Toasts

Custom Range Slider

Styled range input with a gradient fill, ring thumb and a live value bubble that follows the handle, in pure CSS and a few lines of vanilla JS.

Pure CSS Range Sliders

Settings Toggles with Description

Tailwind CSS settings panel with accessible switches, label descriptions, a locked required option, restore defaults and an auto-save status message.

Tailwind CSS Toggles & Switches

Hover and Focus Dropdown

Dark navbar with pure CSS dropdown menus that open on hover and keyboard focus, plus a small vanilla JS layer for Escape, arrow keys and touch taps.

Pure CSS Dropdowns

Forgot Password Form

Tailwind CSS forgot password form with email validation, loading spinner, check-your-inbox success state and a resend cooldown timer.

Tailwind CSS Login & Sign Up

Mini Calendar

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

Most copied

Launch Countdown Card

Bootstrap 5 countdown card for product launches with a reminder button.

Bootstrap 5 Countdown Timers

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

Forgot Password Form

Tailwind CSS forgot password form with email validation, loading spinner, check-your-inbox success state and a resend cooldown timer.

Tailwind CSS Login & Sign Up

Settings Toggles with Description

Tailwind CSS settings panel with accessible switches, label descriptions, a locked required option, restore defaults and an auto-save status message.

Tailwind CSS Toggles & Switches

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.

Choose the design you actually want

Ask an AI coding assistant for "a pricing section" or "a landing page" and it either guesses a layout from your words or makes one up, and you spend the next hour explaining what you really meant. WebDevSnippets works the other way round: you browse real, working designs, compare them in the live preview and pick the one you like.

Found it? Click Download HTML on the component page. You get a single file with the markup, styles and script, ready to use in two ways:

Build it yourself: open the file, copy what you need into your project and adjust the colors and text.
Give it to your AI assistant: attach the file and ask it to use this design in your project, for example "build our pricing section like this file, using our components and brand colors". The AI then follows the design you chose instead of inventing one.

Either way, your project looks the way you decided, not the way a prompt happened to turn out.

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, or download everything as one HTML file, and use it yourself or with your AI assistant.

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.