JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="checkbox" name="positions[]" value="1" id="position-1" class="checkbox-button" />
  <label for="position-1">Position 1</label>
  
  <input type="checkbox" name="positions[]" value="1" id="position-2" class="checkbox-button" />
  <label for="position-2">Position 2</label>
  
  <input type="checkbox" name="positions[]" value="1" id="position-3" class="checkbox-button" />
  <label for="position-3">Position 3</label>
  
  <input type="checkbox" name="positions[]" value="1" id="position-4" class="checkbox-button" />
  <label for="position-4">Position 4</label>
  
  <input type="checkbox" name="positions[]" value="1" id="position-5" class="checkbox-button" />
  <label for="position-5">Position 5</label>
  
  <input type="checkbox" name="positions[]" value="1" id="position-6" class="checkbox-button" />
  <label for="position-6">Position 6</label>
  
  <input type="submit">
</form>

CSS

.checkbox-button {
  display: none;
}

.checkbox-button + label {
  padding: 5px;
  border: solid 1px black;
  border-radius: 5px;
  background-color: salmon;
}

.checkbox-button:checked + label {
  background-color: lightgreen;
}