index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Playground</title>
<link href="./src/styles.css" rel="stylesheet" />
</head>
<body class="min-h-screen overflow-x-hidden bg-ink-950 text-slate-100 antialiased">
<div class="dot-grid pointer-events-none fixed inset-0 opacity-35"></div>
<main class="relative mx-auto flex min-h-screen max-w-5xl items-center px-6 py-16">
<section class="grid w-full gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
<div>
<p class="mb-5 inline-flex rounded-full border border-brand-400/25 bg-brand-400/10 px-3 py-1 font-mono text-xs font-semibold uppercase tracking-[0.2em] text-brand-300">
Tailwind CSS v4 · CSS-first
</p>
<h1 class="font-display text-5xl font-black leading-[0.95] tracking-[-0.055em] text-white sm:text-7xl">
Design directly
<span class="block bg-gradient-to-r from-brand-300 via-fuchsia-300 to-amber-200 bg-clip-text text-transparent">
in your markup.
</span>
</h1>
<p class="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
Edit the utility classes in this file, then open
<code class="rounded bg-white/10 px-1.5 py-0.5 font-mono text-sm text-brand-200">styles.css</code>
to customize your design tokens with Tailwind's CSS-first configuration.
</p>
<div class="mt-8 flex flex-wrap gap-3">
<a
href="#theme"
class="rounded-xl bg-brand-500 px-5 py-3 font-bold text-white shadow-brand-fill transition hover:-translate-y-0.5 hover:bg-brand-400 focus:outline-none focus:ring-4 focus:ring-brand-400/30"
>
Explore the theme
</a>
<span class="self-center rounded-full border border-white/10 px-3 py-1.5 font-mono text-xs text-slate-400">
No config file required
</span>
</div>
</div>
<aside id="theme" class="rounded-3xl border border-white/10 bg-white/[0.06] p-6 shadow-2xl shadow-black/30 backdrop-blur">
<div class="mb-6 flex items-center justify-between">
<span class="font-mono text-xs uppercase tracking-[0.18em] text-slate-400">Theme tokens</span>
<span class="size-2.5 rounded-full bg-emerald-400 shadow-[0_0_18px_theme(colors.emerald.400)]"></span>
</div>
<div class="space-y-3">
<div class="rounded-2xl border border-white/10 bg-ink-950/70 p-4">
<p class="font-mono text-xs text-brand-300">--color-brand-500</p>
<p class="mt-1 text-sm text-slate-400">Creates utilities like bg-brand-500</p>
</div>
<div class="rounded-2xl border border-white/10 bg-ink-950/70 p-4">
<p class="font-mono text-xs text-fuchsia-300">--font-display</p>
<p class="mt-1 text-sm text-slate-400">Creates the font-display utility</p>
</div>
<div class="rounded-2xl border border-white/10 bg-ink-950/70 p-4">
<p class="font-mono text-xs text-amber-200">@utility dot-grid</p>
<p class="mt-1 text-sm text-slate-400">Adds your own reusable utility</p>
</div>
</div>
</aside>
</section>
</main>
<script type="module" src="/src/main.js"></script>
</body>
</html>