JSFiddle - React, Tailwind, and code Playground

HTML

<label>
    <input type="radio" name="button">
        <span class="button">Left</span>
 </label>
 <label>
     <input type="radio" name="button">
         <span class="button">Middle</span>
 </label>
 <label>
     <input type="radio" name="button">
         <span class="button">Right</span>
 </label>

CSS

label{
    letter-spacing:-5px;
   
}
span.button {
    display:inline-block;
    border:1px solid #adadad;
    padding:10px;
    margin:0px;
    letter-spacing:normal;
    
    
}
span.button:hover{
    background-color: #e6e6e6;
    cursor:pointer;
}
label:first-child>span{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
label:last-child>span{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}
input[type=radio]{
    display:none;
}
input:checked+span{
    background-color:#e6e6e6;
    box-shadow: inset 0px 3px 6px 1px rgba(0,0,0, 0.15);
    
}