Tailwind CSS starter
Tailwind CSS v4 through the browser build: utility classes, no build step.
Open in editor Free. No install, no sign-up.
- @tailwindcss/browser
The code
Three files, exactly what you get in the editor.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tailwind starter</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div
class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 dark:bg-gray-950"
>
<div
class="absolute inset-0 bg-[linear-gradient(to_right,#0f172a0d_1px,transparent_1px),linear-gradient(to_bottom,#0f172a0d_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:linear-gradient(180deg,white,transparent)] dark:bg-[linear-gradient(to_right,#ffffff0d_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0d_1px,transparent_1px)]"
></div>
<div
class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:w-full sm:max-w-lg sm:rounded-xl sm:px-10 dark:bg-gray-900 dark:ring-white/10"
>
<div class="mx-auto max-w-md">
<a href="https://tailwindcss.com" target="_blank" class="flex items-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 25 128 78"
class="h-8 w-auto"
role="img"
aria-label="Tailwind CSS"
>
<path
d="M64.004 25.602c-17.067 0-27.73 8.53-32 25.597 6.398-8.531 13.867-11.73 22.398-9.597 4.871 1.214 8.352 4.746 12.207 8.66C72.883 56.629 80.145 64 96.004 64c17.066 0 27.73-8.531 32-25.602-6.399 8.536-13.867 11.735-22.399 9.602-4.87-1.215-8.347-4.746-12.207-8.66-6.27-6.367-13.53-13.738-29.394-13.738zM32.004 64c-17.066 0-27.73 8.531-32 25.602C6.402 81.066 13.87 77.867 22.402 80c4.871 1.215 8.352 4.746 12.207 8.66 6.274 6.367 13.536 13.738 29.395 13.738 17.066 0 27.73-8.53 32-25.597-6.399 8.531-13.867 11.73-22.399 9.597-4.87-1.214-8.347-4.746-12.207-8.66C55.128 71.371 47.868 64 32.004 64zm0 0"
fill="#38bdf8"
/>
</svg>
<span class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white"
>Tailwind CSS</span
>
</a>
<div class="divide-y divide-gray-300/50 dark:divide-white/10">
<div class="space-y-6 py-8 text-base leading-7 text-gray-600 dark:text-gray-300">
<p>
A utility-first playground, right in your browser. Everything here is styled with
classes in
<code class="text-sm font-bold text-gray-900 dark:text-white">index.html</code>:
</p>
<ul class="space-y-4">
<li class="flex items-center">
<svg
class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 dark:fill-sky-900/40"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="11" />
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
</svg>
<p class="ml-4">
Hover, focus, and
<code class="text-sm font-bold text-gray-900 dark:text-white">dark:</code>
variants
</p>
</li>
<li class="flex items-center">
<svg
class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 dark:fill-sky-900/40"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="11" />
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
</svg>
<p class="ml-4">
Arbitrary values like
<code class="text-sm font-bold text-gray-900 dark:text-white"
>bg-[#38bdf8]</code
>
</p>
</li>
<li class="flex items-center">
<svg
class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 dark:fill-sky-900/40"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="11" />
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
</svg>
<p class="ml-4">
Responsive layouts with
<code class="text-sm font-bold text-gray-900 dark:text-white">sm:</code> and
<code class="text-sm font-bold text-gray-900 dark:text-white">lg:</code>
</p>
</li>
</ul>
<p>
Perfect for learning how the framework works, prototyping a new idea, or sharing a
demo.
</p>
</div>
<div class="pt-8 text-base leading-7 font-semibold">
<p class="text-gray-900 dark:text-white">Want to dig deeper into Tailwind?</p>
<p>
<a
href="https://tailwindcss.com/docs"
target="_blank"
class="text-sky-500 hover:text-sky-600"
>Read the docs →</a
>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Questions
Can I use Tailwind CSS without a build step?
Yes. This starter loads Tailwind CSS straight from a CDN, so it runs in the browser with no npm install, bundler, or config.
How do I start a Tailwind CSS project online?
Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.
Is it free?
Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.
Can I share or embed my Tailwind CSS demo?
Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.