toggles #01

<div class="flex items-center max-w-md p-12 mx-auto">
  <div class="flex items-center gap-2" 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-base-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-base-500"
      x-text="enabled ? 'Enabled' : 'Disabled'"
    ></span>
  </div>
</div>