JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">
  <label>
    <input type="radio" name="1"><span>Left</span></label>
  <label>
    <input type="radio" name="1"><span>Middle</span></label>
  <label>
    <input type="radio" name="1"><span>Right</span></label>
</div>

CSS

body {
  font-family: "Arial", serif;
}

.buttons label {
  width: 70px;
  height: 39px;
  float: left;
  background-color: #f1f1f1;
  border: 1px solid #cfd6d9;
  text-align: center;
}

.buttons label span {
  display: block;
  padding: 10px;
}

.buttons label input {
  position: absolute;
  top: -100px;
}

.buttons input:hover + span {
  background-color: #e6e6ff;
}

.buttons input:checked + span {
  background-color: #e6e6ff;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
}