JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<ul class="donate-now">
    <li>
            <input type="radio" id="a25" name="amount"><label for="a25">$25</label>
    </li>
    <li>
            <input type="radio" id="a50" name="amount"><label for="a50">$50</label>
    </li>
    <li>
        
            <input type="radio" id="a75" name="amount" checked="checked"><label for="a75">$75</label>
    </li>
    <li>
        
            <input type="radio" id="a100" name="amount"><label for="a100">$100</label>
    </li>
</ul>

CSS

input[name=amount] {
    opacity: 0.011;
}

.selected{
    outline:1px solid red
}
.donate-now {
    list-style-type:none;
    margin:25px 0 0 0;
    padding:0;
}
.donate-now li {
    float:left;
    margin:0 15px 0 0;
    border: 1px solid #dddddd;
}

.donate-now li:hover {
    background: #dddddd;
}
.donate-now label {
    padding-right: 20px;
    cursor:pointer;
    z-index:90
    -webkit-appearance: button;
    /* WebKit */
    -moz-appearance: button;
    /* Mozilla */
    -o-appearance: button;
    /* Opera */
    -ms-appearance: button;
    /* Internet Explorer */
    appearance: button;
    /* CSS3 */
}

JavaScript

$(':radio').on('change', function () {
     $(':radio').not(this).closest('li').removeClass('selected');
    $(this).closest('li').addClass('selected');
});