JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c-form-check">
  <label>
    <input type="checkbox">Test
  </label>
</div>

CSS

.c-form-check input[type=checkbox] {
  opacity: 0.2;
}

.c-form-check label::before{
  content: '';
  display: inline-block;
  font-weight: normal !important;
  border: 1px solid #676767;
  min-height: 1.375rem;
  min-width: 1.375rem;
  max-height: 1.375rem;
  max-width: 1.375rem;
  margin-top: 0;
  z-index: 1;
  margin-right: .5rem;
  box-shadow: none;
}

.c-form-check:hover label::before {
  border: 1px solid #888888;
}

.c-form-check input[type=checkbox]:checked + label::before {
  background-image: none;
  border: 1px solid @grau6;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 10px green;
}