JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="zornet_ru_samig">
  <input type="checkbox" id="checkbox" />
  <label for="checkbox"></label>
</div>

CSS

body {
  background: #1a1a1a;
  color: #333;
  text-align: center;
}

.zornet_ru_samig {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -20px;
}

label {
  display: block;
  left: 0px;
  top: 0;
  position: relative;
  width: 300px;
  height: 40px;
  z-index: 10;
  line-height: 40px;
  font-weight: bold;
  background: #303030;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;
}

label:after {
  content: "ON";
  width: 150px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #00CCFF;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;
}

#checkbox {
  display: none;
}

:checked + label {
  left: 0px;
}

:checked + label:after {
  left: 150px;
  background: #FC6666;
  content: "OFF";
}