toggles #01

<div class="flex max-w-md mx-auto items-center p-12">
  <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="w-11 h-6 bg-base-300 rounded-full peer peer-checked:bg-accent-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>