JSFiddle - React, Tailwind, and code Playground

by Wendell Christian

HTML

<label class="lembrar-check">
  <input type="checkbox">
  <span class="lembrar-check-person"></span>
Lembrar-me
</label>

CSS

label.lembrar-check input {
  display: none; /* hide the default checkbox */
}

/* style the artificial checkbox */
label.lembrar-check span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* style its checked state..with a ticked icon */
label.lembrar-check [type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}