Code Playground

@import url('https://cdnjs.cloudflare.com/ajax/libs/tachyons/7.0.1-1/tachyons.css');
body {
  font-family: "Poppins", sans-serif;
  background: #FAFAFC;
  color: #4a4a4e;
  transition: 0.2s all;
}

.dark {
  background: #181818;
}

.element {
  position: relative;
}

input[type=checkbox].toggle-switch {
  transform: rotate(90deg);
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
  /* width of the track */
  width: 4em;
  /* height of the track */
  height: 1.5em;
  border-radius: 3em;
  background-color: #ebebeb;
  transition: background-color 0.09s ease-in-out;
  position: relative;
}
input[type=checkbox].toggle-switch:active::after {
  background-color: #f2f2f2;
  padding-right: 0.8em;
}
input[type=checkbox].toggle-switch::after {
  content: "";
  /* toggle shape -- 
  height should equal width 
  to maintain circle */
  width: 2em;
  height: 2em;
  background-color: white;
  border-radius: 3em;
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 2px 0px 5px 0 rgba(0, 0, 0, 0.15);
}

input[type=checkbox].toggle-switch:checked {
  background-color: #333;
}
input[type=checkbox].toggle-switch:checked:active::after {
  margin-left: -0.8em;
}
input[type=checkbox].toggle-switch:checked::after {
  left: 2em;
  background-color: #242424;
}

.opts {
  color: gray;
}

.opt-1 {
  color: black;
}

.opt-1,
.opt-2 {
  transition: 0.2s all;
}

.active .opt-1 {
  color: gray;
}
.active .opt-2 {
  color: white;
}

Frontend Forever App