JSFiddle - React, Tailwind, and code Playground

by lukas_li

HTML

<label class="switch" for="switch-ck">
  <input type="checkbox" id="switch-ck" checked />
  <span>ON</span>
  <span class="inner"></span>
  <span>OFF</span>
</label>

SCSS

body {
  background-color: #ff5a79;
}

.switch {
  position: relative;
  color: #fff;
  font-size: 0;
  cursor: pointer;
  
  input {
    /* visibility: hidden; */
    display: none;
  }

  span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: 0 5px;
    color: #ccc;
    transition: all 0.2s ease-in-out;
  }

  input:checked ~ span {
    color: #fff;
  }
  
  input:checked ~ .inner {
    border-color: #fff;   
  }
 
  input:checked ~ .inner::after {
    margin-left: 2px;
    background-color: #fff;
  }

  .inner {
    position: relative;
    width: 60px;
    height: 30px;
    border-radius: 30px;
    border: 2px solid #ccc;
  }

  .inner::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 30px;
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ccc;
    transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }

}