JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

https://play.tailwindcss.com/HISmzJ1x4F
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<label for="toggle" class="flex items-center cursor-pointer group">
  <div class="relative">
    <input type="checkbox" id="toggle" class="sr-only" />
    <div class="relative inline-flex flex-shrink-0 bg-indigo-600 w-11 h-6 rounded-full border-2 border-transparent cursor-pointer transition-colors ease-in-out duration-200 group-focus-within:outline-none group-focus-within:ring-2 group-focus-within:ring-offset-2 group-focus-within:ring-indigo-500" role="switch" tabindex="0" aria-checked="true" aria-labelledby="headlessui-label-5"></div>
    <div class="dot absolute top-0.5 left-0.5 bg-white w-5 h-5 rounded-full transition ring-0"></div>
  </div>
</label>

CSS

input:checked ~ .dot {
  transform: translateX(100%);
  background-color: #ffffff;
}