JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nicebutton">
    <label><input type="radio" name="1" value="1"><span>Left</span></label>
    <label><input type="radio" name="1" value="2"><span>Middle</span></label>
    <label><input type="radio" name="1" value="2"><span>Right</span></label>
</div>

CSS

body {
            font-family: "Malgun Gothic";
        }

        .nicebutton label {
            background-color: rgba(160, 238, 157, 0.22);
            border: 1px solid #c9d0a4;
            overflow: auto;
            width: 100px;
            font-weight: bold;
            text-align: center;
            float: left;
        }

        .nicebutton label span {

            padding: 11px 11px;
            display: block;

        }

        .nicebutton label input {
            position: absolute;
            top: -100000px;
        }

        .nicebutton input:hover + span {
            background-color: rgba(160, 238, 157, 0.48);

        }

        .nicebutton input:checked + span {
            background-color: rgb(160, 238, 157);
            box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
        }