toggles

              <div
  class="flex items-center gap-2 justify-center flex-col"
  x-data="{ enabled: false }"
>
  <label class="relative inline-flex items-center cursor-pointer">
    <input type="checkbox" x-model="enabled" class="sr-only peer" />
    <div
      class="h-6 rounded-full w-11 bg-zinc-300 peer peer-checked:bg-blue-600"
    ></div>
    <div
      class="w-5 h-5 bg-white rounded-full shadow absolute left-1 top-0.5 transition-transform peer-checked:translate-x-5"
    ></div>
  </label>
  <span
    class="text-sm font-medium text-zinc-500"
    x-text="enabled ? 'Enabled' : 'Disabled'"
  ></span>
</div>