Components
Tabs
Tabs
Tabbed content switching.
Content for Tab 1
<div class="w-full max-w-sm">
<div class="flex space-x-1 rounded-xl border border-border bg-muted p-1">
<button class="w-full rounded-lg bg-background py-1.5 text-sm font-medium text-foreground shadow">Tab 1</button>
<button class="w-full rounded-lg py-1.5 text-sm font-medium text-muted-foreground hover:bg-background/50">Tab 2</button>
</div>
<div class="mt-4 rounded-xl border border-border p-4 bg-card text-card-foreground">
Content for Tab 1
</div>
</div><div className="w-full max-w-sm">
<div className="flex space-x-1 rounded-xl border border-border bg-muted p-1">
<button className="w-full rounded-lg bg-background py-1.5 text-sm font-medium text-foreground shadow">Tab 1</button>
<button className="w-full rounded-lg py-1.5 text-sm font-medium text-muted-foreground hover:bg-background/50">Tab 2</button>
</div>
<div className="mt-4 rounded-xl border border-border p-4 bg-card text-card-foreground">
Content for Tab 1
</div>
</div>