JSFiddle - React, Tailwind, and code Playground

by jklee

CSS

.switch .switch-input {
    display: none
}
.switch .switch-input:checked+.switch-label {
    background-color: #00B900
}
.switch .switch-input:checked+.switch-label:after {
    left: calc(100% - 1.375rem);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05)
}


.switch .switch-input {
  display: none;
}
.switch .switch-input:checked +.switch-albel:after {
  left: calc(100% - 1.375rem);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05);
}
.switch .switch-input.disabled + .switch-label, .switch .switch-input.disabled + .switch-label {
  opacity: 0.6;
  cursor: not-allowed;
}