JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<div class="switch">
  <input id="active" type="checkbox">
  <label for="active">
    <div class="switcher" data-checked="Yes" data-unchecked="No"></div>
  </label>
</div>

CSS

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.switch {
  position: relative;
}

.switch *,
.switch *:before,
.switch *:after {
  box-sizing: border-box;
}

.switch input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.switch input[type="checkbox"][disabled]~label {
  pointer-events: none;
}

.switch input[type="checkbox"][disabled]~label .switcher {
  opacity: 0.4;
}

.switch input[type="checkbox"]:checked~label .switcher:before {
  content: attr(data-unchecked);
  left: 0;
}

.switch input[type="checkbox"]:checked~label .switcher:after {
  content: attr(data-checked);
}

.switch label {
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
}

.switch label .switcher {
  position: relative;
}

.switch label .switcher:before {
  content: attr(data-checked);
  position: absolute;
  top: 0;
  text-transform: uppercase;
  text-align: center;
}

.switch label .switcher:after {
  content: attr(data-unchecked);
  position: absolute;
  z-index: 5;
  text-transform: uppercase;
  text-align: center;
  background: white;
  transform: translate3d(0, 0, 0);
}

.switch input[type="checkbox"][disabled]~label {
  color: rgba(119, 119, 119, 0.5);
}

.switch input[type="checkbox"]:focus~label .switcher,
.switch input[type="checkbox"]:hover~label .switcher {
  background-color: #777;
}

.switch input[type="checkbox"]:focus~label .switcher:after,
.switch input[type="checkbox"]:hover~label .switcher:after {
  color: #5e5e5e;
}

.switch input[type="checkbox"]:hover~label {
  color: #6a6a6a;
}

.switch input[type="checkbox"]:checked~label:hover {
  color: #55bc49;
}

.switch input[type="checkbox"]:checked~label .switcher {
  background-color: #70c767;
}

.switch input[type="checkbox"]:checked~label .switcher:after {
  color: #4fb743;
}

.switch input[type="checkbox"]:checked:focus~label .switcher,
.switch input[type="checkbox"]:checked:hover~label .switcher {
  background-color: #5fc054;
}

.switch...