Copy-paste UI components

Bootstrap 6 single pricing card with a monthly/yearly toggle, large price, feature checklist with excluded items and a subscribe button with loading state.

Bootstrap 6 Cards

Card with Header Tabs

Bootstrap 6 card whose header holds nav tabs that switch the card body between an overview with stats, an activity feed and a settings form.

Bootstrap 6 Cards

Blog Post Card with Author

Dark Bootstrap 6 blog post cards with a category badge on the photo, excerpt, author avatar, reading time and a bookmark toggle.

Bootstrap 6 Cards

Card Grid with Equal Heights

Responsive Bootstrap 6 recipe card grid where every card has the same height and the footers line up, with a radio button filter.

Bootstrap 6 Cards

Horizontal Card with Image

Bootstrap 6 horizontal card with a photo on the left that stacks on mobile, amenity chips, rating, price and a wishlist toggle button.

Bootstrap 6 Cards

Webinar Registration Confirmation Email

Email-safe webinar confirmation template with a hero photo, speaker card, time zone note, bulletproof join button, add-to-calendar links and a prep checklist.

Pure CSS Email Templates

Stat Card with Sparkline

Pure CSS KPI cards with a big value, colored trend badge, low/high range and an inline SVG sparkline that redraws itself on hover.

Pure CSS Stat Cards

Weather Card with City Photo Background

Bootstrap 5 weather card over a city photo with a city switcher, Celsius/Fahrenheit toggle, current conditions and a 5-day forecast on frosted glass.

Bootstrap 5 Weather Widgets

Password Reset Link Card with Expiry Notice

Tailwind password reset screen with a choose-new-password button, expiry notice, copyable secure link, security note and request details for the reset flow.

Tailwind CSS Login & Sign Up

Infinite Auto-Scrolling Image Strip

Seamless pure CSS marquee of landscape photos that loops forever, pauses on hover or focus and has a Pause/Play button.

Pure CSS Carousels

How It Works Section with Three Steps

Gutenberg how it works section with three numbered steps, a connecting divider line, short step descriptions and a centered call to action button.

WordPress Feature Sections

Most copied

Responsive Navbar with Hamburger Menu

Accessible pure CSS navbar that collapses into a hamburger menu on small screens.

Pure CSS Navbars

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

Split Hero with Diagonal Photo Clip

Pure CSS split hero with headline, buttons and stats beside a full-height photo cut on a diagonal with clip-path, plus an accent stripe and rating badge.

Pure CSS Hero Sections

Hero with Rotating Words

Dark hero section whose headline cycles through words with a slide-and-fade animation, a pause button and decorative stat cards.

Pure CSS Hero Sections

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

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 6, 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.