<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full h-60">
  <div class="space-y-6">
    <div class="flex items-center">
      <input id="email" type="radio" name="notification-method" checked
        class="relative size-4 appearance-none rounded-full border border-zinc-300 bg-white shadow-sm shadow-black/5 transition duration-200 before:absolute before:inset-1 before:rounded-full before:bg-white hover:border-zinc-400 checked:border-primary-600 checked:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-zinc-300 disabled:bg-zinc-100 disabled:before:bg-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:shadow-black/30 dark:hover:border-zinc-500 dark:ring-offset-zinc-950 dark:checked:border-primary-500 dark:checked:bg-primary-500 dark:focus-visible:outline-primary-500 dark:disabled:border-zinc-700 dark:disabled:bg-zinc-900 dark:disabled:before:bg-zinc-600 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
      <label for="email" class="ml-3 block text-sm/6 font-medium text-zinc-900 dark:text-zinc-100">Email</label>
    </div>
    <div class="flex items-center">
      <input id="sms" type="radio" name="notification-method"
        class="relative size-4 appearance-none rounded-full border border-zinc-300 bg-white shadow-sm shadow-black/5 transition duration-200 before:absolute before:inset-1 before:rounded-full before:bg-white hover:border-zinc-400 checked:border-primary-600 checked:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-zinc-300 disabled:bg-zinc-100 disabled:before:bg-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:shadow-black/30 dark:hover:border-zinc-500 dark:ring-offset-zinc-950 dark:checked:border-primary-500 dark:checked:bg-primary-500 dark:focus-visible:outline-primary-500 dark:disabled:border-zinc-700 dark:disabled:bg-zinc-900 dark:disabled:before:bg-zinc-600 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
      <label for="sms" class="ml-3 block text-sm/6 font-medium text-zinc-900 dark:text-zinc-100">Phone (SMS)</label>
    </div>
    <div class="flex items-center">
      <input id="push" type="radio" name="notification-method"
        class="relative size-4 appearance-none rounded-full border border-zinc-300 bg-white shadow-sm shadow-black/5 transition duration-200 before:absolute before:inset-1 before:rounded-full before:bg-white hover:border-zinc-400 checked:border-primary-600 checked:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-zinc-300 disabled:bg-zinc-100 disabled:before:bg-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:shadow-black/30 dark:hover:border-zinc-500 dark:ring-offset-zinc-950 dark:checked:border-primary-500 dark:checked:bg-primary-500 dark:focus-visible:outline-primary-500 dark:disabled:border-zinc-700 dark:disabled:bg-zinc-900 dark:disabled:before:bg-zinc-600 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
      <label for="push" class="ml-3 block text-sm/6 font-medium text-zinc-900 dark:text-zinc-100">Push notification</label>
    </div>
  </div>
</div>