JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
   font-family: Arial, Helvetica, sans-serif;
}

/* [class="buttons"] - fix for old browsers */
.buttons[class="buttons"] {
  font-size: 0px;
  display: table;
  padding-top: 10px;
}

.inputbox > input {
  position: absolute;
  left: -10000px;
}

.inputbox > span {
  border: solid 1px grey;
  border-left: 0px;
  padding: 8px 15px;
  font-size: 14px;
  transition: background-color 1s linear;
}

.inputbox > span:hover {
  background-color: rgba(230,230,230, 1);
}

.inputbox > span:active {
  background-color: rgba(190,190,190, 1);
}

.inputbox > input:focus + span {
  border: solid 1px #00aaff;
  box-shadow: 0 0 5px #00aaff;
}

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

.inputbox:first-child > span {
  border-radius: 5px 0px 0px 5px;
  border-left: solid 1px grey;
}

.inputbox:last-child > span {
  border-radius: 0px 5px 5px 0px;
}