JSFiddle - React, Tailwind, and code Playground

HTML

<h4>
  Working but label and input in same line.
  Needed to place input before label to make it work.
</h4>
<div>
  <label for="accept1">
    <input id="accept1" type="checkbox">
    <span class="checkbox-custom"></span>
  Accept
  </label>
</div>

CSS

input[type="checkbox"] {  
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
div{
  position: relative;
}
label {
  margin-left: 25px;
}

.checkbox-custom {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 12px;
  width: 12px;
  background-color: transparent;
  border-radius: 5px;
  border: 2px solid #ccc;
}

.checkbox-custom::after {
  position: absolute;
  content: "";
  left: 12px;
  top: 12px;
  height: 0px;
  width: 0px;
  border-radius: 5px;
  border: solid #ccc;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(0deg) scale(0);
  -ms-transform: rotate(0deg) scale(0);
  transform: rotate(0deg) scale(0);
  opacity: 1;
}

input:checked ~ .checkbox-custom {
  background-color: #ccc;
  border-radius: 5px;
  transform: rotate(0deg) scale(1);
  opacity: 1;
  border: 2px solid #ccc;
}

input:checked ~ .checkbox-custom::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}