JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
  <input
    checked
    id="select1"
    type="radio"
    name="select"
    class="huest"
  />
  <label for="select1">Двач</label>
  <input
    id="select2"
    type="radio"
    name="select"
    class="huest"
  />
  <label for="select2">Сосач</label>
  <input
    id="select3"
    type="radio"
    name="select"
    class="huest"
  />
  <label for="select3">Харкач</label>
  <input
    id="select4"
    type="radio"
    name="select"
    class="huest"
  />
  <label for="select4">Дермач</label>
  <input
    id="select5"
    type="radio"
    name="select"
    class="huest"
  />
  <label for="select5">Пермач</label>
</div>

CSS

#test {
  display: flex;
  flex-flow: row nowrap;
}
#test > label {
  margin: 0 8px;
  padding: 8px 16px;
  background-color: green;
  cursor: pointer;
}
.huest {
  display: none;
}

.huest:checked + label {
  background-color: yellow!important;
}