JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="cb" id="check1">
<label for="check1">Normal</label>
<br>
<input type="checkbox" class="cb" id="">
<label for="check2">Power</label>
<br>
<input type="checkbox" class="cb" id="">
<label for="check3">Admin</label>

CSS

label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  line-height: 20px;
  margin: 5px;
}
label:before {
  line-height: 20px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #666666;
}
input[type=checkbox]:checked + label:before{
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}