<div class="card w-full max-w-sm">
  <div class="card-content grid gap-6">
    <div>
      <h3 class="text-lg font-semibold tracking-tight">Notifications</h3>
      <p class="text-sm/6 text-muted-foreground mt-2">
        Choose how you want to be notified.
      </p>
    </div>
    <div class="grid gap-5">
      <div class="flex items-start justify-between gap-4">
        <div class="grid gap-2">
          <label class="label" for="email">Email notifications</label>
          <span class="text-sm text-muted-foreground">
            Receive updates and alerts via email.
          </span>
        </div>
        <input
          type="checkbox"
          role="switch"
          class="switch"
          id="email"
          name="email"
          checked=""
        />
      </div>
      <div class="flex items-start justify-between gap-4">
        <div class="grid gap-2">
          <label class="label" for="push">Push notifications</label>
          <span class="text-sm text-muted-foreground">
            Get instant alerts on your mobile device.
          </span>
        </div>
        <input
          type="checkbox"
          role="switch"
          class="switch"
          id="push"
          name="push"
        />
      </div>
      <div class="flex items-start justify-between gap-4">
        <div class="grid gap-2">
          <label class="label" for="marketing">Marketing emails</label>
          <span class="text-sm text-muted-foreground">
            Stay informed about new features and offers.
          </span>
        </div>
        <input
          type="checkbox"
          role="switch"
          class="switch"
          id="marketing"
          name="marketing"
        />
      </div>
    </div>
    <button class="btn btn-primary">Save preferences</button>
  </div>
</div>