JSFiddle - React, Tailwind, and code Playground

by swade

HTML

<label class="checkbox" id="checkbox">
    <input type="checkbox" />
    <div class="bg">
    	<span class="off">off</span>
    	<span class="on">on</span>
    	<div class="slider"></div>
    </div>
</label>

CSS

#checkbox {
    margin: 50px 100px;
    position: relative;
}
.checkbox {
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.checkbox * {
   -webkit-transition: all .05s linear;  
   -moz-transition: all .05s linear;  
   -o-transition: all .05s linear;  
   transition: all .05s linear; 
}
.checkbox input[type="checkbox"] {
    display: none;
}
.checkbox input[type="checkbox"] + .bg {
    background: #00b090;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 30px;
    position: relative;
    width: 56px;
}
.bg .off {
    left: 4px;
    position: absolute;
    top: 9px;
}
.bg .on {
    position: absolute;
    right: 8px;
    top: 9px;
}
.bg .slider {
    background: #eceff2;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 26px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 26px;
}
.checkbox input[type="checkbox"]:checked + .bg {
    background: #ff7f7c;
}
.checkbox input[type="checkbox"]:checked + .bg .slider {
    left: 28px;
    /*right: 2px;*/
}