Skip to content
chaiTailwind

Tutorial — build a page

We’ll build a small marketing page — an imaginary tea shop called Steeped & Co. — from an empty HTML file. By the end you’ll have a hero, a feature grid, a quote, and a footer. Every visual decision is a chai-* class.

1 — Start from empty

Create index.html and paste this scaffold. We’ll build everything inside <body>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Steeped & Co.</title>
  </head>
  <body>
    <!-- everything goes here -->
  </body>
</html>

Open it in your browser. You should see a blank page. Good — that’s the starting line.

2 — Add chaiTailwind

One line in <head>:

<script src="https://unpkg.com/@developedbysaad/chaitailwind"></script>

That’s the install. After DOMContentLoaded the engine starts walking the DOM, finds every chai-* class, and converts each into an inline style. You’ll see this in action in the next step.

3 — A page shell

Replace the contents of <body> with a centered container that gives us a comfortable canvas.

<main class="chai-max-w-[960px] chai-mx-auto chai-p-12 chai-bg-cream-100">
  <h1>Steeped &amp; Co.</h1>
</main>

Live preview:

Steeped & Co.

The page now has structure — but it’s still bare. Time for some type.

4 — Typography for the hero

A real headline, a tagline, and an eyebrow line on top.

<main class="chai-max-w-[960px] chai-mx-auto chai-p-16 chai-bg-cream-100">
  <div class="chai-text-xs chai-uppercase chai-tracking-widest chai-text-saffron chai-mb-4">
    Est. 2026 · Loose-leaf, slow brew
  </div>


  <h1 class="chai-text-6xl chai-font-bold chai-text-chai-900 chai-leading-tight chai-mb-6">
    A pot a day,<br>
    however you like it.
  </h1>


  <p class="chai-text-lg chai-text-chai-700 chai-leading-relaxed chai-max-w-[60ch]">
    Single-estate teas, hand-blended chai, and the equipment to do them justice.
    Brewed for people who measure mornings in steeping minutes.
  </p>
</main>

Live preview:

Est. 2026 · Loose-leaf, slow brew

A pot a day,
however you like it.

Single-estate teas, hand-blended chai, and the equipment to do them justice. Brewed for people who measure mornings in steeping minutes.

Notice how chai-tracking-widest, chai-leading-tight, and chai-leading-relaxed give each block its own typographic personality.

5 — A primary CTA

Append a button after the paragraph:

<a href="#shop" class="chai-inline-block chai-mt-8 chai-px-6 chai-py-3
                       chai-bg-chai-700 chai-text-white chai-rounded-full
                       chai-shadow-md chai-cursor-pointer chai-no-underline">
  Browse the menu →
</a>

Live preview:

Browse the menu →

That’s the hero done. Time for content.

6 — A feature grid

Three cards in a row using grid, with a small visual flourish on each.

<section class="chai-mt-20 chai-grid chai-grid-cols-3 chai-gap-6">
  <article class="chai-p-6 chai-bg-saffron-100 chai-rounded-lg chai-border chai-border-saffron-300">
    <div class="chai-text-xs chai-uppercase chai-tracking-wider chai-text-saffron-700 chai-mb-2">Origin</div>
    <h3 class="chai-text-xl chai-font-semibold chai-text-saffron-900 chai-mb-2 chai-m-0">Darjeeling First Flush</h3>
    <p class="chai-text-saffron-800 chai-leading-relaxed chai-m-0">A bright, floral spring pluck from Castleton estate.</p>
  </article>


  <article class="chai-p-6 chai-bg-cardamom-100 chai-rounded-lg chai-border chai-border-cardamom-300">
    <div class="chai-text-xs chai-uppercase chai-tracking-wider chai-text-cardamom-700 chai-mb-2">House blend</div>
    <h3 class="chai-text-xl chai-font-semibold chai-text-cardamom-900 chai-mb-2 chai-m-0">Cardamom Masala</h3>
    <p class="chai-text-cardamom-800 chai-leading-relaxed chai-m-0">Green cardamom, ginger, black pepper. Simmered, never boiled.</p>
  </article>


  <article class="chai-p-6 chai-bg-masala-100 chai-rounded-lg chai-border chai-border-masala-300">
    <div class="chai-text-xs chai-uppercase chai-tracking-wider chai-text-masala-700 chai-mb-2">Smoked</div>
    <h3 class="chai-text-xl chai-font-semibold chai-text-masala-900 chai-mb-2 chai-m-0">Lapsang Souchong</h3>
    <p class="chai-text-masala-800 chai-leading-relaxed chai-m-0">Pine-smoked black tea from Wuyi. Pairs with a thunderstorm.</p>
  </article>
</section>

Live preview:

Origin

Darjeeling First Flush

A bright, floral spring pluck from Castleton estate.

House blend

Cardamom Masala

Green cardamom, ginger, black pepper. Simmered, never boiled.

Smoked

Lapsang Souchong

Pine-smoked black tea from Wuyi. Pairs with a thunderstorm.

chai-grid-cols-3 does the work — repeat(3, minmax(0, 1fr)) under the hood — and chai-gap-6 spaces the children.

7 — A pulled quote

A simple block to break up the rhythm:

<blockquote class="chai-mt-20 chai-py-12 chai-px-8 chai-bg-chai-800 chai-text-cream-100
                   chai-text-center chai-rounded-lg chai-italic">
  <p class="chai-text-2xl chai-leading-relaxed chai-max-w-[600px] chai-mx-auto chai-m-0">
    "Tea is the magic key to the vault where my brain is kept."
  </p>
  <cite class="chai-block chai-mt-4 chai-text-saffron chai-text-sm chai-not-italic chai-tracking-wider">
    — Frances Hardinge
  </cite>
</blockquote>

Live preview:

“Tea is the magic key to the vault where my brain is kept.”

— Frances Hardinge

8 — A footer

Closing line, two columns of links, a thin rule across the top.

<footer class="chai-mt-20 chai-pt-8 chai-border-t chai-border-chai-300
               chai-flex chai-justify-between chai-items-center chai-text-sm chai-text-chai-700">
  <div>© 2026 Steeped &amp; Co. Brewed in Mumbai.</div>
  <div class="chai-flex chai-gap-6">
    <a href="#" class="chai-text-chai-700 chai-no-underline">Stockists</a>
    <a href="#" class="chai-text-chai-700 chai-no-underline">Brewing guide</a>
    <a href="#" class="chai-text-chai-700 chai-no-underline">Trade</a>
  </div>
</footer>

Live preview:

9 — Wrap-up

That’s the page — hero, features, quote, footer — in a single HTML file with one script tag.

Where to go next

Made by Saad · @developedbysaad on X