JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<div class="switch">
  <input id="toggle-01" type="checkbox" name="color" >
  <label for="toggle-01" class="switch"></label>
</div>

SCSS

.switch {
  input[type=checkbox] {
    display: none;
  }
  label {
    cursor: pointer;
    width: 40px;
    height: 20px;
    display: inline-block;
    background-color: #b4c1c7;
    border-radius: 20px;
    margin: 3px 4px;
    position: relative;
    transition: background-color 0.3s ease-out;
    
    &:after {
      transition: transform 0.2s ease-out;
      content: "";
      display: block;
      position: absolute;
      top: -3px;
      left: -4px;
      box-shadow: 0 1px 2px rgba(40, 48, 51, 0.25);
      width: 26px;
      height: 26px;
      background-color: white;
      border-radius: 50%;
    }
  }
  input[type=checkbox]:checked + label {
    background-color: #0bd46f;
    &:after {
      left: auto;
      transform: translateX(18px);
    }
  }
}