JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

  <input type="checkbox" id="customCheckbox">
  <label for="customCheckbox"></label>

CSS

#customCheckbox{
  visibility:hidden;
  width:0;
  height:0;
  margin:0;
}
label{
  position:relative;
  display:inline-block;
  width:120px;
  height:60px;
  border:6px solid #ff00ff;
  background-color:#d7d8da;
  border-radius: 33px;
  transition: background 0.3s linear;
  cursor:pointer;
}
label:after{
  content:'';
  position:absolute;
  left:1px;
  top:1px;
  width:58px;
  height:58px;
  border-radius: 50%;
  background-color:#f0f;
  transition: left 0.3s ease-out;
}

/* Here comes the magic */

#customCheckbox:checked ~ label{
  background-color: #42d77d;
}
#customCheckbox:checked ~ label:after{
  left: 61px;
}