JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<label class="switch">
  <input type="checkbox">
  <span></span>
  <!-- This switch has no text -->
</label>

<label class="switch">
  <input type="checkbox">
  <span></span>
  Text after
</label>

<label class="switch">
  Text before
  <input type="checkbox">
  <span></span>
</label>

SCSS

/* 
## $component-height is used to
## scale the switch component.
## All other dimensions will be
## automatically calculated using
## this value as a base.
*/

$component-height: 30px;

$tint-red: rgb(255, 59, 48);
$tint-orange: rgb(255, 149, 0);
$tint-yellow: rgb(255, 204, 0);
$tint-green: rgb(76, 217, 100); // default
$tint-teal-blue: rgb(90, 200, 250);
$tint-blue: rgb(0, 122, 255);
$tint-purple: rgb(88, 86, 214);
$tint-pink: rgb(255, 45, 85);

.switch input {
  display: none;
}

.switch * {
  box-sizing: border-box;
  vertical-align: middle;
}

.switch {
  display: block;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  background: #FFF;
}

.switch span {
  display: inline-block;
  width: $component-height * 1.6;
  height: $component-height;
  position: relative;
  border-radius: $component-height / 2;
  background: $tint-pink;
  border: 1px solid #cecece;
  overflow: hidden;
}

.switch span:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: $component-height / 2;
  background: #FFF;
  //transition: all .4s ease;
  transform: scale3d(1, 1, 1);
}

.switch span:after {
  content: "";
  display: block;
  width: $component-height - 4px;
  height: $component-height - 4px;
  border-radius: ($component-height - 4px) / 2;
  background: #FFF;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.20), 
              0px 0px 2px 0px rgba(0, 0, 0, 0.60);
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .2s linear;
}

.switch input:active ~ span:after {
  width: $component-height + ($component-height / 10);
}

.switch input:checked:active ~ span:after {
  transform: translate3d((($component-height * 0.6) - ($component-height / 10) - 4px), 0, 0);
}

.switch input:checked ~ span:after {
  transform: translate3d($component-height * 0.6, 0, 0);
}

.switch input:checked ~ span:before {
  transform: scale3d(0, 0, 0);
}