JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT" class="test">
  <div class="form-item-edit-how-40">
  <label class="option" for="edit-how-40">Met de bus</label>
</div>

SCSS

.form-item-edit-how-40 {
  display: inline-block;
  padding: 20px;
  width: 50px;
  height: 50px;
  background: yellow;
}


.form-item-edit-how-40:hover {
  background: red;
}

input[type="checkbox"]:checked + .form-item-edit-how-40{
  background: green;
}


input,
label {
  //display: none;
  //visibility: hidden;
} 

label {
  background: grey;
  width: 50px;
  height: 50px;
}