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

Latest components

New Sign-In Security Alert Email

Email-safe security alert template for a new sign-in: device, browser, location, IP and time rows plus "This was me" and "Secure my account" buttons.

Pure CSS Email Templates

Tabs with Photo Preview Panels

Tailwind CSS feature tabs that swap a large photo preview with a caption for each selected tab, with full keyboard support.

Tailwind CSS Tabs

Minimal Contact Form with Animated Underline Inputs

Pure CSS minimal contact form with floating labels, underlines that sweep in on focus, a character counter and accessible inline validation.

Pure CSS Contact Forms

Cart with Saved for Later Section

Bootstrap 5 cart page with product photos, quantity selects, a saved for later list and a live order summary with free-shipping progress.

Bootstrap 5 Shopping Carts

Weather Forecast with Weekly View

Tailwind CSS weather widget with current conditions, a selectable 7-day forecast with temperature range bars, and a °C/°F switch.

Tailwind CSS Weather Widgets

Newsletter Email with Featured Articles

Email-safe editorial newsletter with masthead, featured story, two-column article grid that stacks on mobile, quick links, sponsor slot and footer.

Pure CSS Email Templates

Custom Cursor Follower

Smooth custom cursor with a dot and an eased ring that grows on links, shows a label over cards and inverts the headline, in CSS and vanilla JS.

Pure CSS Cursor Effects

CSS Pattern Backgrounds

Eight pure CSS gradient background patterns (dots, polka, grid, graph paper, stripes, crosshatch, checkerboard, zigzag) with a live scale slider.

Pure CSS Backgrounds

Link Underline Effects

Six animated link underline styles in pure CSS (slide, center, highlighter, ink fill, line swap and wave) that also work on links that wrap.

Pure CSS Hover Effects

Glitch Text Effect

Pure CSS glitch heading with sliced cyan and magenta copies, CRT scanlines, and subtle, hover-only and acid palette variants.

Pure CSS Text Effects

Welcome Email

Email-safe welcome email template with logo header, hero photo, three getting-started steps, a bulletproof button, help line and footer.

Pure CSS Email Templates

World Clock Widget

Tailwind CSS world clock with live digital times for six cities, day and night cards, time differences, a 12h/24h switch and the Intl API.

Tailwind CSS Clocks

Most copied

Launch Countdown Card

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

Bootstrap 5 Countdown Timers

Two-Column FAQ

Bootstrap 5 FAQ section with questions split into two accordion columns, plus/minus icons and a dark contact support prompt.

Bootstrap 5 FAQ Sections

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

World Clock Widget

Tailwind CSS world clock with live digital times for six cities, day and night cards, time differences, a 12h/24h switch and the Intl API.

Tailwind CSS Clocks

Custom Cursor Follower

Smooth custom cursor with a dot and an eased ring that grows on links, shows a label over cards and inverts the headline, in CSS and vanilla JS.

Pure CSS Cursor Effects

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.