JSFiddle - React, Tailwind, and code Playground

HTML

<label class="product">label
  <input type="checkbox">
</label>

CSS

.product {
  position: relative;
  display: block;
  width: 100%;
  font-size: 18px;
  border-bottom: 1px solid #000;
}

.product:hover {
  cursor: pointer;
}

.product input::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  bottom: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.product input:checked::after {
  background: #1faeff;
}