Copy-paste UI components

Email-safe order confirmation template with order number, product rows with photos, totals table, shipping and billing addresses and a track order button.

Pure CSS Email Templates

User Hover Card Popover with Photo

Bootstrap 5 popover hover card showing a user photo, cover band, bio, follower stats and a working follow button.

Bootstrap 5 Tooltips & Popovers

System, Light and Dark Theme Dropdown

Accessible Tailwind CSS dropdown to choose a light, dark or system theme, with live OS sync, saved preference and CSS variable tokens.

Tailwind CSS Theme Toggles

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

Booking Date Picker with Disabled Dates

Bootstrap 5 check-in and check-out date range picker with a two-month calendar, booked dates, minimum stay and price total.

Bootstrap 5 Date Pickers

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

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.