<script src="//unpkg.com/alpinejs" defer></script>
   <script src="https://cdn.tailwindcss.com"></script>

<div x-data="{ checkbox: false }">
<input x-ref="cb" type="checkbox" :checked="checkbox">
 
<button  @click="checkbox = !checkbox" type="button" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" role="switch" aria-checked="false">
  <span class="sr-only">Use setting</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span aria-hidden="true" class=" pointer-events-none inline-block h-5 w-5 rounded-full  shadow transform ring-0 transition ease-in-out duration-200" :class="checkbox?'translate-x-5 bg-green-500':'bg-white translate-x-0'"></span>
</button>
  <span x-text="checkbox"></span>
</div>