JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button-set">
    <label>
        <input type="radio" name="radiobutton">
        <span>Раз</span>
    </label><label>
        <input type="radio" name="radiobutton">
        <span>Два</span>
    </label><label>
        <input type="radio" name="radiobutton">
        <span>Два с точечкой</span>
    </label><label>
        <input type="radio" name="radiobutton">
        <span>Два с хвостиком</span>
    </label><label>
        <input type="radio" name="radiobutton">
        <span>Три</span>
    </label>
</div>

CSS

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + span {
    background: #eee;
}
input[type="radio"]:checked + span:hover {
    background: #eee;
    box-shadow: inset 0 0 5px #bbb;
    -mox-box-shadow: inset 0 0 5px #bbb;
    -webkit-box-shadow: inset 0 0 5px #bbb;
}
span {
    display: inline-block;
    padding: 10px;
}
label:hover {
    cursor: pointer;
    box-shadow: inset 0 0 8px #999;
}
label {
    border: 1px solid #bbb;
    display: inline-block;
    font: 16px/1.5 arial;
}
label:first-child, label:first-child span {
    border-bottom-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-right: none;
}
label:last-child, label:last-child span {
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-left: none;
}