tab
Works with a keyboard
Real buttons and links, visible focus rings, Escape closes what it opens. Tested by tabbing through it, not by assuming.
Ready-to-use code templates
Components you can copy, paste and ship. Every one is plain HTML and CSS with no build step, runs without a framework, and works with a keyboard.
Free no attribution needed
Live preview on every page
Accessible labels, focus and ARIA
No dependencies
Browse by category
45 templates across 11 categories, and the library is still growing.
HTML boilerplates
Starting documents you can copy into a new file and build on.
4 templatesNavigation
Headers, menus, sidebars and breadcrumbs that work on a phone.
4 templatesCards
Product, article, pricing and profile cards.
4 templatesForms
Contact, login, signup and multi-step forms.
4 templatesHero sections
The first screen — headline, image and the one thing you want clicked.
3 templatesLayouts
Page skeletons and the grid and flexbox recipes behind them.
4 templatesCSS components
Buttons, loaders, tooltips, modals and accordions.
10 templatesFooters
Site footers, from a single line to a full sitemap.
2 templatesPage sections
Testimonials, stats, timelines and calls to action.
3 templatesEmbeds
Maps, video, audio and share buttons that stay responsive.
4 templatesTables
Data tables that survive a phone screen.
3 templatesStart here
The ones people reach for most often.
SEO-ready HTML boilerplate
A full head block with meta, Open Graph, Twitter cards and structured data.
HTMLCSSResponsive navbar
A header that collapses to a hamburger under 820px. No framework, keyboard accessible.
HTMLCSSJavaScriptTailwindProduct card
An e-commerce card with image, price, rating and an add-to-basket action.
HTMLCSSTailwindContact form
A contact form with real labels, inline validation and error and success states.
HTMLCSSJavaScriptResponsive grid without media queries
Four grid recipes that reflow on their own, using auto-fit, minmax and container queries.
HTMLCSSButton set
Primary, secondary, ghost and danger, in three sizes, with every state covered.
HTMLCSSTailwindModal dialog
A modal built on the native dialog element — focus trap and backdrop included, for free.
HTMLCSSJavaScriptGoogle Maps embed
A responsive map with a title, lazy loading and an optional click-to-load consent gate.
HTMLCSSJavaScriptEvery template
How to use these
Each page has a live preview, the code in separate HTML, CSS and JavaScript tabs, and a download button that gives you a single working file. Copy the tab you need, or take the whole thing.
There is no licence to read and no attribution required. Use them in client work, in commercial products, in anything. They are starting points, not finished designs — change the colours, change the words, and cut what you do not need.
The code is written to be edited by a person. No utility-class soup, no build step, no abstraction between you and the CSS. Where a Tailwind version makes sense, there is a separate tab for it.
What every template here does
aria
Announces itself
Labels on every input, aria-expanded on every toggle, and no icon-only control without
an accessible name.
↔
Responsive without effort
Intrinsic grids that reflow on their own rather than a stack of breakpoints to maintain.
0kb
No dependencies
No jQuery, no framework, no icon font. Everything is HTML, CSS and a little vanilla JavaScript.
~
Respects reduced motion
Anything that animates is switched off under prefers-reduced-motion.
/*
Explained, not just given
Each page says why the code is written the way it is, and what breaks if you change it.
Need to clean up your own markup?
The formatter, minifier and validator are all free and run in your browser.
Learn the why, not just the how
Longer reading on formatting, indentation and minification.