JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="radio" class="button" id="Male" name="gender" />
    <label for="Male">Male</label>
    <input type="radio" class="button" id="Female" name="gender" />
    <label for="Female">Female</label>
</form>

CSS

input[type=radio], input[type=checkbox] {
    display: none;
}
form input[type="radio"]:checked + label {
    background-color: yellow;
}
label {
    display: block;
    appearance: button;
    -webkit-appearance: button;
    -moz-appearance: button;
    -ms-appearance: button;
    font-family:'Roboto', sans-serif;
    font-weight: 400;
    background: #DDDDDD;
    font-size: 1.6rem;
    color: #111111;
    border: 2px solid #AAAAAA;
    padding: 8px;
    width: 40%;
    margin: 0 auto;
    text-align: center;
    &: hover {
        cursor: pointer;
    }
    &: checked {
        background-color: $yellow;
    }
}