JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="module-switcher">
  <input id="switch" type="checkbox"/>
  <label for="switch"></label>
</div>

CSS

.module-switcher {
  border: 2px solid #000000;
  position: relative;
  height: 30px;
  width: 60px;
}
.module-switcher #switch {
  display: none;
}
.module-switcher label[for="switch"] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30px;
  background: red;
  transition: 1s;
  cursor: pointer;
}

#switch:checked ~ label[for="switch"] {
  -webkit-transform: translatex(100%);
          transform: translatex(100%);
  background: green;
}