A restaurant site in Tailwind: menu with anchor sections, table booking form, gallery, hours and contact, plus a private-dining page and a 404 in Pro. Schema.org markup for the venue and the menu.
Free + Pro School template
Larkfield — school website template
A primary school site built for the accessibility audit: skip link, labelled landmarks, thick focus rings, AA contrast in both themes, tables with captions and scoped headers, 17 px type. Programmes, admissions, staff, contact, plus term dates and a 404 in Pro.
- HTML5
- Tailwind 4
- WCAG AA
- Dark mode
- No JS
- 360px+
Free and Pro
Free version
The home page and its CSS — enough to publish a one-pager. A credit link stays in the footer.
- Home page, compiled CSS
- yes
- Programmes, admissions, staff, contact
- no
- Term dates + 404 pages
- no
- Tailwind source and partials
- no
- AA contrast, focus rings, both themes
- yes
- Credit link in footer
- required
- Updates and support
- no
Pro
Every page, the Pro-only pages, the source files, no attribution, and 12 months of updates and email support.
- Home page, compiled CSS
- yes
- Programmes, admissions, staff, contact
- yes
- Term dates + 404 pages
- yes
- Tailwind source and partials
- yes
- AA contrast, focus rings, both themes
- yes
- Credit link in footer
- not required
- Updates and support
- 12 months, email
Free archive
- index.html
- assets/css/style.css
- README.md · LICENCE.txt
Pro archive
- index.html · programmes.html · admissions.html
- staff.html · contact.html
- term-dates.html · 404.html (Pro only)
- assets/css/style.css
- src/pages/ · src/partials/ · build.mjs
- README.md · LICENCE.txt (Pro)
Licence
Use it in unlimited personal and commercial projects, including client work.
Do not resell the template itself, alone or in a bundle.
Built for the audit, not retrofitted
School and public-sector sites get checked against WCAG, usually after launch and usually in a
hurry. Larkfield starts from the checklist: a skip link that is the first thing the keyboard
reaches, a <main> that can actually receive focus, sections labelled by their headings,
underlined links inside content, 3 px focus rings that clear 3:1 on both backgrounds, form
fields with real labels and 44 px hit targets, tables with captions and scope on every header.
Contrast is measured, not guessed
Every colour pair in src/input.css carries its ratio in a comment — body text at 16:1, muted
text at 7:1, form borders at 4.4:1 — and the dark set clears the same numbers. Change a colour
and the comment tells you which pair to re-check.
The pages parents actually want
Term dates, absence reporting, admissions and contact are one click from the home page in four tiles, and again in the 404. Most school-site traffic is someone looking for one fact quickly, so the fact comes first and the prose second.
What you will need to replace
Photos are placeholders with their subject written on them. The School structured data on the
home page and the statutory links in the footer — accessibility statement, privacy notice,
safeguarding, inspection report — are the ones your authority will ask about; link them before
launch.
Compatibility
- Chrome / Edge 109+
- Safari 15.4+
- Firefox 115+
- iOS 15+
- Android 10+
Read before you build
Version history
- 1.0.0 2026-09-11
First release
- 26 KBhome page + CSS
- 4.5:1minimum text contrast, both themes
- 0JavaScript
- 7pages in Pro
Related templates
A design-and-engineering studio site that leads with the case study: results as big numbers, a 'what didn't work' section, sticky team and stack. Big type, one accent colour, no logo soup. Work, services with prices, team, contact, plus careers and a 404 in Pro.
An estate agency in Tailwind: listings with filters as real links, a property page with gallery, room sizes, floor plan, map and enquiry form, agents with direct numbers, plus a valuation funnel and a 404 in Pro. No JavaScript, RealEstateListing markup.