JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div>
  <input id="aa" type="checkbox" checked>
  <label for="aa">
    Check bok
  </label>
</div>

CSS

div {
  position: relativ;
  padding: 30px;
}
input[type="checkbox"] {
     position: absolute;
     opacity:0;
}
input[type="checkbox"]:checked+label:before,
input[type="checkbox"]:checked+.error+label:before,
input[type="radio"]:checked+label:before,
input[type="radio"]:checked+.error+label:before {
  font-weight: normal;
  width: 1rem;
  height: 1rem;
  padding-top: .125rem;
  background-color: #2d96cd;
  border: 1px solid #2d96cd;
  color: #fc0;
  text-align: center;
  font-size: .4375rem;
}

label {
  font-size: .875rem;
  line-height: 1.25rem;
}

label:before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  margin-right: -1.5rem;
  border: 1px solid #a8a8a8;
  vertical-align: middle;
  margin-top: 1px;
  font-size: .875rem;
}