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

Latest components

Email Verification Email

Dark, email-safe confirm-your-email template with a big bulletproof verify button, a six-digit one-time code, expiry note and footer.

Pure CSS Email Templates

Event Card with Photo and Date Badge

Pure CSS event cards with a cover photo, ticket-stub date badge, category chip, time and venue details, price and a ticket button.

Pure CSS Cards

Business Card Style Contact Card

Bootstrap 5 digital business card with portrait, role, tap-to-call contact links, copy buttons, a QR code and a downloadable vCard.

Bootstrap 5 Profile Cards

Support Chat Popup with Agent Photo

Tailwind CSS support chat popup with an agent photo, online status dot, suggested questions, typing indicator, unread badge and simulated replies.

Tailwind CSS Chat Widgets

Top Announcement Bar

Dismissible gradient announcement bar fixed to the top of the page, with a tag, link, close button, Escape support and remembered dismissal.

Pure CSS Alerts

Abandoned Cart Reminder Email

Email-safe abandoned cart reminder with product photos and prices, subtotal, free delivery incentive, checkout button and related products.

Pure CSS Email Templates

Event Invitation Card with Photo and RSVP

Bootstrap 5 event invitation card with a header photo, date chip, event details grid, RSVP buttons, calendar and directions links.

Bootstrap 5 Cards

FAQ with Live Search Filter

Tailwind CSS FAQ section with a live search box that filters questions as you type, highlights matches, adds topic chips and shows an empty state.

Tailwind CSS FAQ Sections

Polaroid Photo Gallery

Pure CSS polaroid gallery on a cork board: tilted photo frames with tape and handwritten captions that straighten and lift on hover or focus.

Pure CSS Galleries

Split Button Dropdown

Bootstrap 5 split buttons: a primary deploy action whose target is chosen from an attached dropdown, plus compact save and export split buttons.

Bootstrap 5 Button Groups

Password Reset Email

Email-safe password reset template with lock image, VML bulletproof button, expiry note, fallback link, security notice and request details.

Pure CSS Email Templates

Reels-Style Vertical Feed

Tailwind CSS reels-style vertical feed with snap-scrolling full-height photos, like, comment, share and save buttons, double-click to like and keyboard navigation.

Tailwind CSS Social Feeds

Most copied

3D Coverflow Image Carousel

Coverflow-style image carousel with rotated 3D side photos, reflections, captions, dots, swipe and keyboard navigation in pure CSS and vanilla JS.

Pure CSS Carousels

Navbar with Sliding Active Indicator

Dark responsive navbar with a glowing underline that slides between links on hover, focus and click, built with CSS custom properties and vanilla JS.

Pure CSS Navbars

Expanding Search Bar

Search icon button that expands into a pill-shaped input, shown in a dark navbar and a large hero search, with Escape to close and a demo submit.

Pure CSS Search Bars

Password Strength Meter

Bootstrap 5 password input with show/hide toggle, four-step strength meter, live requirements checklist and confirmation match check.

Bootstrap 5 Inputs

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

Social Login Buttons

Dark Tailwind CSS social login buttons for Google, Apple and GitHub with full-width and icon-only variants and a loading spinner state.

Tailwind CSS Social Buttons

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.