JSFiddle - React, Tailwind, and code Playground

by rizwanabbasi

HTML

<span class="checkbox">
    <input type="checkbox">
    <label data-on="&nbsp;" data-off="&nbsp;"></label>
</span>

CSS

body {
  margin:0 0;
  padding:10px 0;
  }

/* CSS3 Metal Checkbox */
.checkbox {
  display:inline-block;
  position:relative;
  text-align:left;
  width:28px;
  height:18px;
  background-color:#356fa0;
  overflow:hidden;
  -webkit-box-shadow:inset 0 1px 2px #134269,0 1px 0 rgba(19,66,105,0.1);
  -moz-box-shadow:inset 0 1px 2px 134269,0 1px 0 rgba(19,66,105,0.1);
  box-shadow:inset 0 1px 2px 134269,0 1px 0 rgba(19,66,105,0.1);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
   padding:1px;
}

.checkbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  margin:0 0;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
  z-index:2;
}

.checkbox label {
  background-color:#3c3c3c;
  background-image:-webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:inline-block;
  width:15px;
    height:16px;
  text-align:center;
  font:bold 11px/28px Arial,Sans-Serif;
  color:#999;
  text-shadow:0 -1px 0 rgba(0,0,0,0.7);
  -webkit-transition:margin-left 0.2s ease-in-out;
  -moz-transition:margin-left 0.2s ease-in-out;
  -ms-transition:margin-left 0.2s ease-in-out;
  -o-transition:margin-left 0.2s ease-in-out;
  transition:margin-left 0.2s ease-in-out;
 ...