JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<input type="checkbox" id="switchCheckbox">
<label class="switchButton" for="switchCheckbox"></label>

CSS

/* Checkbox Hack */
body{
background:#272727;
}
input[type=checkbox]{
  display:none;
}

/* Toggled State */
#switchCheckbox[type=checkbox]:checked ~ .switchButton:before{
width:1.7em;
}   
#switchCheckbox[type=checkbox]:checked ~ .switchButton:after{
   left:2.1em;
}
.switchButton{
	position: absolute;
    top:1em;
    width: 4em;
    height: 2em;
    -webkit-appearance: none;
    display: block;
    background: limegreen;
    border: solid 2px rgb(255, 255, 255);
    border-radius: 1em;
    box-shadow: #9bb1af 0px 0px 2px 0px;
}.switchButton:before {
    content: "";
    position: absolute;
    background: #E91E63;
    width: 4em;
    height: 2em;
    top: 0px;
    right: 0px;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em; 
    border-bottom-left-radius: 1em;
    border-top-left-radius: 1em;
    transition:width ease .4s;
    z-index: 1;
}.switchButton:after {
    content: "";
    position: absolute;
    top: 0px;
    left: -1px;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    background: #ffffff;
    cursor:pointer;
    transition:left ease .4s;
   	z-index: 2;
}