JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<checkbox checked="false" tabindex="0"></checkbox>

CSS

checkbox {
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  outline: 0;
  position: relative;
  cursor: pointer;
}

checkbox:focus {
  background-color: #ddd;
}

checkbox:active {
  background-color: #fafafa;
}

checkbox:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 10px;
  left: 10px;
  border: 2px solid #aaa;
  border-radius: 3px;
}

checkbox[checked=true]:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: #555;
}

JavaScript

let checkbox = document.querySelector('checkbox');
checkbox.addEventListener('click', function (event) {
  let checked = checkbox.getAttribute('checked');
  checked = checked === 'true';
  checked = !checked;
  checkbox.setAttribute('checked', checked);
});