KÖFI — café landing
Warm editorial type, asymmetric grid, six-card menu, dark visit panel, newsletter.
Templates
Each template below is a single self-contained HTML file that uses chaiTailwind. Preview it live, then download the .html and edit it — no build step, no extra files needed.
The previews you see are real iframes loading the actual files from /templates/. View source on any of them.
Using a downloaded template
The download links pull the raw HTML files. By default each file expects chai.js next to it (relative ../chai.js resolves inside the docs site). For your own deployment, change the <script> src in the file’s <head> to one of:
<!-- 1. From the published npm package via unpkg --><script src="https://unpkg.com/@developedbysaad/chaitailwind"></script>
<!-- 2. A local copy you've placed beside the HTML file --><script src="./chai.js"></script>That’s the only line you’ll touch. Everything else is portable HTML.
☕ KÖFI — café landing
A warm, editorial single-page landing for an imaginary specialty café. Heavy on Fraunces italics, asymmetric grid, hand-drawn SVG cup. Demonstrates: nav, hero with split-illustration layout, six-card menu grid, story section, dark visit panel, newsletter footer.
📊 Steep Studio — dashboard
A productivity-app dashboard with a sidebar, top bar, four stat cards (with sparklines), a bar chart rendered from divs, a top-blends panel with progress bars, and a data table. Demonstrates: full-bleed split layout, dense tabular data, status pills, mixed serif/mono type.
Steep Studio — dashboard
Sidebar shell, sparkline stat cards, div-rendered bar chart, status-pill table.
🎓 Tutorial result
The exact result of the build-a-page tutorial — a small marketing page with hero, three-card features, pulled quote, and footer.
Steeped & Co. — small landing
The page produced by the eight-step tutorial. A good starting point for a personal site.
Want more?
Templates are kept intentionally small and focused — the components in the gallery are the building blocks; templates show how to assemble them.
If you’d like to contribute one, open a PR on the GitHub repo — the bar is “single file, no JS framework, everything visual is chai-*”.
Made by Saad · @developedbysaad on X