JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="cb">
<label for="cb" class="checkbox"><span class="text">Hello</span></label>

CSS

#cb {
  display: none;
}

.checkbox {
  border-radius: 50%;
  background: #fff;
  border: 1px solid #444;
  width: 15px;
  height: 15px;
  display: block;
  cursor: pointer;
}

#cb:checked + .checkbox {
  box-shadow: 0px 0px 0px 5px #fff inset;
  background: #aaa;
}

.checkbox .text {
  color: #888;
  margin-left: 20px;
}

#cb:checked + .checkbox .text {
  color: #222;
}