JSFiddle - React, Tailwind, and code Playground

by parkji

HTML

<h2>Goal Title</h2>
<p>
   <input type="radio" name="url-match-type" id="exact" /><label class="radio-label" for="exact">Exact</label>
   <input type="radio" name="url-match-type" id="includes" /><label class="radio-label" for="includes">Includes</label>
</p>
<p><label for="url">URL</label><input type="text" name="url" id="url" value="" /></p>

CSS

input[type="radio"] {
    opacity: 0;
    width: 0;
}
.radio-label {
    background: #CCCCCC;
    padding: 5px;
    cursor: pointer;
    display: inline-block;
}

JavaScript

$('input[type="radio"]').change(function() {
    $('.radio-label').css({background: '#CCC'});
    if($(this).is(':checked')) {
        $('label[for="' + this.id + '"]').css({'background': '#FF0000'});
    }
});