JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label class="super-button"><input name="position" type="radio" value="left"><i>Left</i></label><!--
    --><label class="super-button"><input name="position" type="radio" value="middle"><i>Middle</i></label><!--
    --><label class="super-button"><input name="position" type="radio" value="right"><i>Right</i></label>
</form>

CSS

label.super-button {
  display: inline-block;
  cursor:pointer;
}
label.super-button input {
  position: fixed;
  opacity: 0;
}
label.super-button i {
  display: inline-block;
  padding: 10px;
  border: 1px solid #C0C0C0;
  font-style: normal;
}
label.super-button:first-child i {
  border-radius: 5px 0 0 5px; 
  border-right: 0;
}
label.super-button:last-child i {
  border-radius: 0 5px 5px 0; 
  border-left: 0;
}
label.super-button input:hover + i {
  background-color: #E6E6E6;
}
label.super-button input:active + i {
  background-color: #E6E6E6;
  box-shadow: inset 0 0 7px #BDB9B9;
}
label.super-button input:checked + i {
  background-color: #E6E6E6;
  box-shadow: inset 0 0 7px #BDB9B9;
}
label.super-button input:-moz-focusring + i {
  outline: 3px solid black;
}