tailwindcss-toggle

~~ HTML:

<label 
  for="toogleA"
  class="flex items-center cursor-pointer"
>
  <!-- toggle -->
  <div class="relative">
    <!-- input -->
    <input id="toogleA" type="checkbox" class="hidden" />
    <!-- line -->
    <div
      class="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"
    ></div>
    <!-- dot -->
    <div
      class="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"
    ></div>
  </div>
  <!-- label -->
  <div
    class="ml-3 text-gray-700 font-medium"
  >
    Toggle Me!
  </div>
</label>


~~ CSS:

.toggle__dot {
  top: -.25rem;
  left: -.25rem;
  transition: all 0.3s ease-in-out;
}

.toggle__line {
  transition: all 0.3s ease-in-out;
  transition-delay: 0.1s;
}

input:checked ~ .toggle__dot {
  transform: translateX(100%);
}

input:checked ~ .toggle__line {
  background-color: #48bb78;
}

Taken from codepen.io/lhermann/pen/EBGZRZ and slightly changed. Handle doesn't turn green but the slider does.