Tailwind Playground

Experiment with Tailwind CSS utility classes on sample elements and see the rendered result instantly, without a build step.

Element

Content

Classes

Presets

Hello Tailwind

JSXjsx

<div className="flex items-center justify-center gap-3 rounded-2xl bg-blue-600 px-6 py-3 text-white shadow-lg">
  Hello Tailwind
</div>

Experiment with Tailwind CSS utility classes on sample elements and see the rendered result instantly, without a build step.

Element

Content

Classes

Presets

Hello Tailwind

JSXjsx

<div className="flex items-center justify-center gap-3 rounded-2xl bg-blue-600 px-6 py-3 text-white shadow-lg">
  Hello Tailwind
</div>