JSFiddle - React, Tailwind, and code Playground

by Gatsu35

HTML

<span class="checkbox">
  <input type="checkbox" id="pouet"/>
  <label for="pouet">
     Mon label
  </label>
</span>

CSS

.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.checkbox label::before {
  content: "\00A0";
  border: 0.1em solid #000;
  width: 0.8em;
  height: 0.8em;
  line-height:0.8em;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  box-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.3);
  padding-left:0.1em;
  font-weight:bold;
  color:green;
}
.checkbox input:checked + label::before {
   content: "\2714";
}

JavaScript

main();
// code juste pour la démo, aucun JS n'est nécessaire.
function main() {
  var el = document.createElement("input");
  el.style="position:absolute; right:10px; top:10px; width:40px";
  el.type="number";
  el.length=2;
  el.value=50;
  document.body.appendChild(el);
  const change = () => {
  document.documentElement.style.fontSize = el.value + "px";}
  el.addEventListener("change",change );
  el.addEventListener("click", change);
  change();
}