<!doctype html>
<html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="./vendor/tailwind.css" /></head>
<body class="bg-slate-900 text-slate-100 p-8 font-sans">
<div class="flex items-center gap-4 mb-6">
<h1 class="text-2xl font-bold tracking-tight">Tailwind</h1>
<span class="rounded-full bg-amber-500 px-3 py-1 text-xs font-medium text-slate-900">v4</span>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="rounded-lg border border-slate-700 bg-slate-800 p-4">
<p class="text-sm text-slate-400">Card one</p>
<p class="mt-2 text-xl font-semibold">42</p>
</div>
<div class="rounded-lg border border-slate-700 bg-slate-800 p-4">
<p class="text-sm text-slate-400">Card two</p>
<p class="mt-2 text-xl font-semibold">7</p>
</div>
<div class="rounded-lg border border-amber-500 bg-slate-800 p-4">
<p class="text-sm text-amber-500">Card three</p>
<p class="mt-2 text-xl font-semibold">13</p>
</div>
</div>
<button class="mt-6 rounded-md bg-amber-500 px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-amber-400">
A button
</button>
</body></html>