<button className="px-6 py-3 text-white rounded-lg border border-neutral-700">Learn More</button>
<img src={user.avatar} className="w-10 h-10 rounded-full" />
<div className="grid grid-cols-3 gap-4">
  <Card title="Active users" value={1247} />
  <Card title="Sessions" value={3892} />
  <Card title="Conversions" value="4.2%" />
</div>
<input type="email" placeholder="you@company.com" className="px-4 py-2 bg-neutral-900 rounded" />
<nav className="flex items-center gap-6">
  <Link href="/pricing">Pricing</Link>
  <Link href="/docs">Docs</Link>
  <Link href="/login">Sign in</Link>
</nav>
<dialog open className="fixed inset-0 m-auto rounded-2xl bg-neutral-900 p-8">
  <h2 className="text-2xl font-semibold">Confirm deletion</h2>
  <p className="mt-2 text-neutral-400">This cannot be undone.</p>
  <div className="mt-6 flex justify-end gap-3">
    <button onClick={onCancel}>Cancel</button>
    <button onClick={onDelete} className="bg-red-500 text-white">Delete</button>
  </div>
</dialog>
<table className="w-full text-sm">
  <thead><tr><th>Repo</th><th>Score</th><th>Issues</th></tr></thead>
  <tbody>
    {rows.map(r => <tr key={r.id}><td>{r.repo}</td><td>{r.score}</td><td>{r.issues}</td></tr>)}
  </tbody>
</table>
<form onSubmit={handleSubmit} aria-label="Sign up form">
  <label htmlFor="email">Email</label>
  <input id="email" name="email" required />
  <button type="submit">Sign up</button>
</form>

<button className="px-6 py-3 text-white rounded-lg border border-neutral-700">Learn More</button>
<img src={user.avatar} className="w-10 h-10 rounded-full" />
<div className="grid grid-cols-3 gap-4">
  <Card title="Active users" value={1247} />
  <Card title="Sessions" value={3892} />
  <Card title="Conversions" value="4.2%" />
</div>
<input type="email" placeholder="you@company.com" className="px-4 py-2 bg-neutral-900 rounded" />
<nav className="flex items-center gap-6">
  <Link href="/pricing">Pricing</Link>
  <Link href="/docs">Docs</Link>
  <Link href="/login">Sign in</Link>
</nav>
<dialog open className="fixed inset-0 m-auto rounded-2xl bg-neutral-900 p-8">
  <h2 className="text-2xl font-semibold">Confirm deletion</h2>
  <p className="mt-2 text-neutral-400">This cannot be undone.</p>
  <div className="mt-6 flex justify-end gap-3">
    <button onClick={onCancel}>Cancel</button>
    <button onClick={onDelete} className="bg-red-500 text-white">Delete</button>
  </div>
</dialog>
<table className="w-full text-sm">
  <thead><tr><th>Repo</th><th>Score</th><th>Issues</th></tr></thead>
  <tbody>
    {rows.map(r => <tr key={r.id}><td>{r.repo}</td><td>{r.score}</td><td>{r.issues}</td></tr>)}
  </tbody>
</table>
<form onSubmit={handleSubmit} aria-label="Sign up form">
  <label htmlFor="email">Email</label>
  <input id="email" name="email" required />
  <button type="submit">Sign up</button>
</form>