JSFiddle - React, Tailwind, and code Playground

by CJ Juarez

HTML

<hr />

<div class="checkbox">
   <input type="checkbox" value="1" id="checkbox1" />
   <label for="checkbox1"></label>
</div>

<hr />

CSS

body {
   padding: 0;
   margin: 0;
   background: #444;
}

hr {
   border: none;
   border-top: 1px solid #2E2E2E;
   border-bottom: 1px solid #555;
}

.checkbox > input[type=checkbox] {
    visibility: hidden;
}

.checkbox {
   position: relative;
   display: block;
   width: 80px;
   height: 26px;
   margin: 0 auto;
   background: #FFF;
   border: 1px solid #2E2E2E;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
}

.checkbox:after {
   position: absolute;
   display: inline;
   right: 10px;
   content: 'no';
   color: #E53935;
   font: 12px/26px Arial, sans-serif;
   font-weight: bold;
   text-transform: capitalize;
   z-index: 0;
}

.checkbox:before {
   position: absolute;
   display: inline;
   left: 10px;
   content: 'yes';
   color: #43A047;
   font: 12px/26px Arial, sans-serif;
   font-weight: bold;
   text-transform: capitalize;
   z-index: 0;
}

.checkbox label {
   position: absolute;
   display: block;
   top: 3px;
   left: 3px;
   width: 34px;
   height: 20px;
   background: #2E2E2E;
   cursor: pointer;
   transition: all 0.5s linear;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
   left: 43px;
}