Pour-Chaiwind Playground

Preview title

HTML

<main class="chai-p-24 chai-bg-slate-100 chai-min-h-screen">
  <section class="chai-bg-white chai-rounded-3xl chai-shadow-lg chai-p-24 chai-max-w-520 chai-mx-auto">
    <div class="chai-flex chai-items-center chai-justify-between chai-gap-16 chai-mb-20">
      <span class="chai-bg-orange chai-text-white chai-px-14 chai-py-8 chai-rounded-full chai-font-bold">
        chai demo
      </span>
      <span class="chai-text-slate-600 chai-font-medium">
        Pour-Chaiwind
      </span>
    </div>

<h1 class="chai-text-4xl chai-font-black chai-text-slate-800 chai-leading-tight">
      Brew utility styling fast
    </h1>

<p class="chai-text-slate-600 chai-leading-relaxed chai-mt-12">
      Edit this block to test spacing, colors, flex layouts, sizing, shadows, and more.
    </p>

<div class="chai-flex chai-gap-12 chai-mt-20 chai-flex-wrap">
      <button class="chai-bg-blue-500 chai-text-white chai-px-16 chai-py-10 chai-rounded-full">
        Primary
      </button>
      <button class="chai-bg-emerald-500 chai-text-white chai-px-16 chai-py-10 chai-rounded-full">
        Success
      </button>
      <button class="chai-bg-rose-500 chai-text-white chai-px-16 chai-py-10 chai-rounded-full">
        Danger
      </button>
    </div>
  </section>
</main>

Test classes and preview instantly

HTML playground

Preview panel