<!-- Toggle A -->
<div class="flex items-center justify-center w-full mb-12">
  <label for="toogleA" class="flex items-center cursor-pointer">
    <!-- toggle -->
    <div class="relative">
      <!-- input -->
      <input id="toogleA" type="checkbox" class="sr-only" />
      <!-- line -->
      <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" />
      <!-- dot -->
      <div
        class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition"
      />
    </div>
    <!-- label -->
    <div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
  </label>
</div>

<!-- Toggle B -->
<div class="flex items-center justify-center w-full mb-12">
  <label for="toggleB" class="flex items-center cursor-pointer">
    <!-- toggle -->
    <div class="relative">
      <!-- input -->
      <input type="checkbox" id="toggleB" class="sr-only" />
      <!-- line -->
      <div class="block bg-gray-600 w-14 h-8 rounded-full" />
      <!-- dot -->
      <div
        class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"
      />
    </div>
    <!-- label -->
    <div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
  </label>
</div>
