JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dots">
  <label for="toggle"></label>
  <input id="toggle" type="checkbox" />
  <div class="dot"></div>
</div>

CSS

html, body {
  height: 100%;
  background: black;
}

.dots {
  position: absolute;
  right: 20px;
}

.dots input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.dots label { 
  display: inline-block;
  cursor: pointer;
  position: absolute;
  width: 15px;
  height: 32px;
  top: 38px;
  left: -10px;
  z-index: 999;
}

.dot,
.dot:before,
.dot:after {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: #fff;
  transform: rotate(270deg);
  cursor: pointer;
}

.dot {
  top: 50px;
  right: 0;
}

.dot:before,
.dot:after {
  content: "";
}

.dot:before {
  right: 10px;
  transition: right .3s ease-out, width .3s ease-out;
}

.dot:after {
  left: 10px;
  transition: left .3s ease-out, width .3s ease-out;
}

.dots:hover .dot:before {
  right: -10px;
}

.dots:hover .dot:after {
  left: -10px;
}

.dots input[type=checkbox]:checked ~ .dot:before {
  right: -8px;
  width: 22px;
  transform: rotate(225deg);
}

.dots input[type=checkbox]:checked ~ .dot:after {
  left: -8px;
  width: 22px;
  transform: rotate(135deg);
}