Coder Wrap provides free to use snippets

   /**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box;}

body {
  font-family: "Poppins", sans-serif;
  color: #444;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.exp-checkbox  {
  font-family: "Poppins", sans-serif;
  display: block;
 margin: auto;
  width: 500px !important;
  height: 300px !important;
 background-color: #f5f5f5;
 border: #ccc 1px solid !important;
}
.exp-checkbox fieldset {
  border: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/**Typeo CSS End**/



.exp-checkbox label {

  font-size: 1.2rem;
  cursor: pointer;
  display: block;
  margin: 10px;
}
.exp-checkbox label > input {
  display: none;
}
.exp-checkbox label span {
  color: #6A759B;
}
.exp-checkbox label i {
  display: inline-block;
  width: 64px;
  height: 26px;
  border-radius: 20px;
  vertical-align: middle;
  transition: 0.25s 0.09s;
  position: relative;
  background: #cfe1e9;
}
.exp-checkbox label i:after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
  transition: 0.15s;
}
.exp-checkbox label > input:checked + i {
  background: #1094fb;
}
.exp-checkbox label > input:checked + i + span {
  color: #29316b;
}
.exp-checkbox label > input:checked + i:after {
  transform: translateX(38px);
}

 function cbChange(obj) {
  var cbs = document.getElementsByClassName("cb"); 
  for (var i = 0; i < cbs.length; i++) {
    cbs[i].checked = true;
  }
  obj.checked = false;
}