JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input type="radio" id="p4" class="plus" name="a4">
  <input type="radio" id="m4" class="minus" name="a3">
  <label for="m4" class="minus">-</label>
  <b>4</b>
  <label for="" class="plus disabled">+</label>
</div>
<div>
  <input type="radio" id="p3" class="plus" name="a3">
  <input type="radio" id="m3" class="minus" name="a2">
  <label for="m3" class="minus">-</label>
  <b>3</b>
  <label for="p3" class="plus">+</label>
</div>
<div>
  <input type="radio" id="p2" class="plus" name="a2">
  <input type="radio" id="m2" class="minus" name="a1">
  <label for="m2" class="minus">-</label>
  <b>2</b>
  <label for="p2" class="plus">+</label>
</div>
<div>
  <input type="radio" id="p1" class="plus" name="a1">
  <input type="radio" id="m1" class="minus" name="a1">
  <label for="" class="minus disabled">-</label>
  <b>1</b>
  <label for="p1" class="plus">+</label>
</div>

CSS

label {
  border-radius: 15px;
  border: solid 1px lightgray;
  background: white;
  padding: .5em;
}
input, .plus:checked ~ * { display: none; }
.disabled { background: lightgray; color: gray; }
body {
  font-family: Courier;
  user-select: none;
  background: white;
}
div {
  position: absolute;
  background: white;
}