JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<div id="donate" class="principal">
    <label ><input type="radio" name="toggle" value="red" checked><span>Hotel</span></label>
    <label ><input type="radio" name="toggle" value="green"><span>Hotel + Flight</span></label>
</div>



   <br><br><br><br><br><br>
    <div class="red donatebox" style="display:block">Hotel</div>
    <div class="green donatebox">Hotel + Flight</div>

CSS

#donate label {
    float:left;
    width:120px;
    margin:4px;
    border-radius:4px;
    overflow:auto;
       
}
#donate label span {
    text-align:center;
    font-size: 12px;
    padding:10px 0px;
    display:block;
}
#donate label input {
    position:absolute;
    top:-20px;
}
#donate input:checked + span {
    background-color:#FF8432;
    color:#F7F7F7;
}
#donate input + span {
    background-color:#CCCCCC;
    color:#444;
}


.donatebox{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background-color:#00BFFF; }
    .green{ background-color:#A3D900; }

JavaScript

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".donatebox").not(targetBox).hide();
        $(targetBox).show();
    });
});