<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 flex items-center justify-center">
  <div class="relative inline-block mr-2 w-10 align-middle select-none transition duration-200 ease-in">
    <input type="checkout" class="toggle-checkbox absolute block w-6 h-6 border-4 rounded-full appearance-none cursor-pointer">
    <label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cusrsor-pointer"></label>
  </div>
</div>
.toggle-checkbox:checked {
  @apply:right-0 border-green-400;
  right:0;
  border-color:#68d391;
}
.toggle-checkbox:checked + .toggle-label {
  @apply:bg-green-400;
  background-color:#68d391;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.