JSFiddle - React, Tailwind, and code Playground

HTML

<label class="inputbox left"><input type="radio" name="side" value="left"><span>Left</span></label>
<label class="inputbox middle"><input type="radio" name="side" value="middle"><span>Middle</span></label>
<label class="inputbox right"><input type="radio" name="side" value="right"><span>Right</span></label>

CSS

@keyframes opacity {
  50% {background-color: rgba(230,230,230, 0.5);}
  to {background-color: rgba(230,230,230, 1);}
}

body {
  font-size: 0px;
  display: table;
  padding-top: 10px;
}

.inputbox > input:checked + span {
  background-color: #E6E6E6;
  box-shadow: inset 0 0 5px grey;
}

.inputbox > span:hover {
  animation: opacity 1s linear 1;
  animation-fill-mode: forwards;
}

.inputbox > input {
  display: none;
}

.inputbox > span {
  border: solid 1px grey;
  padding: 10px 15px;
  font-size: 16px;
}

.left > span {
  border-radius: 5px 0px 0px 5px;
}

.right > span {
  border-radius: 0px 5px 5px 0px;
}