<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Notifications</h3>
<p class="text-sm/6 text-muted-foreground">Choose how you want to be notified.</p>
</div>
<div class="grid gap-6">
<div class="flex items-center justify-between gap-4">
<div class="grid gap-1.5">
<span class="text-sm font-medium">Email notifications</span>
<span class="text-xs text-muted-foreground">Receive updates and alerts via email.</span>
</div>
<input class="switch" type="checkbox" role="switch" checked="" />
</div>
<div class="flex items-center justify-between gap-4">
<div class="grid gap-1.5">
<span class="text-sm font-medium">Push notifications</span>
<span class="text-xs text-muted-foreground">Get instant alerts on your mobile device.</span>
</div>
<input class="switch" type="checkbox" role="switch" />
</div>
<div class="flex items-center justify-between gap-4">
<div class="grid gap-1.5">
<span class="text-sm font-medium">Marketing emails</span>
<span class="text-xs text-muted-foreground">Stay informed about new features and offers.</span>
</div>
<input class="switch" type="checkbox" role="switch" />
</div>
</div>
<button class="btn">Save preferences</button>
</div>
</div>