JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-item-edit-how-40">
  <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
  <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:active,
.form-item-edit-how-40:hover {
  background: red;
}

input:checked {
  background: green;
}

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

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