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.
Copy-paste UI components
Free HTML, CSS and JavaScript components for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Preview live, copy the code, ship faster.
Browse by category
All 446 componentsLatest components
Logo List Section for Shopify
Shopify logo list section with a wrapping row of brand logos, optional links, a grayscale option and text-free placeholders until logos are added.
Card with Image and Buttons
Bootstrap 6 card with a top photo, status badge, bookmark toggle, title, text, meta details, price and primary and secondary action buttons.
Settings Drawer with Tabs
Dark Bootstrap 6 Drawer with tabbed settings panels (General, Alerts, Privacy), switches, a Range slider, select menus and a save bar that tracks unsaved changes.
Bottom Drawer Action Sheet
Bootstrap 6 bottom Drawer styled as a mobile action sheet with a share row, edit actions in a list group, pin toggle, delete action and confirmation toasts.
Filter Drawer for Product Lists
Bootstrap 6 Drawer from the left with category checks, a Range price slider, feature toggles, rating, in-stock switch, live result count and apply/reset buttons.
Drawer Shopping Cart
Bootstrap 6 Drawer shopping cart that slides in from the right with product rows, quantity steppers, a free-shipping progress bar, subtotal and checkout.
Cinema Seat Selection Screen with Showtimes
Cinema seat selection screen for a movie ticket app: seat map with taken and recliner seats, date and showtime chips, a live price bar and a ticket type bottom sheet.
Crypto Wallet Dashboard
Crypto wallet dashboard screen with total balance, change badge, portfolio chart with period tabs, quick actions and an assets list with sparklines and 24h price change.
Privacy and Security Settings Screen
Privacy and security settings screen for mobile apps with a two-factor authentication switch, active sessions with sign out, change password sheet and delete account confirmation.
Group Chat Screen with Reactions
Group chat screen for mobile apps with member avatars, sender names, emoji reactions by long press or button, reply preview with quoted messages and a composer.
Flight Search and Results Screen
Flight search app screen with from/to swap, dates and a travellers sheet, then a flight results list with times, duration, stops and best, cheapest and fastest sort tabs.
Most copied
Responsive Navbar with Hamburger Menu
Accessible pure CSS navbar that collapses into a hamburger menu on small screens.
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.
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.
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.
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.
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.
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.