JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <output class="checked"></output>
  Enabled
</label>

CSS

body { font-family: sans-serif; }
output {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #036;
}
output.checked::before {
  content: "";
  display: inline-block;
  width: 5.1px;
  height: 10.7px;
  border: solid #036;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transform-origin: 5px 14px;
  position: absolute;
}

JavaScript

document.querySelector("output").addEventListener("click", function(e) {
  this.classList.toggle("checked");
  console.log(e.timeStamp);
});