JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div id="sites">
    <input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="//placekitten.com/151/151" alt="Stack Overflow" /></label>
    <input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="//placekitten.com/150/150" alt="Server Fault" /></label>
    <input type="radio" name="site" id="su" value="superuser" /><label for="su"><img src="//placekitten.com/152/152" alt="Super User" /></label>
</div>

CSS

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#sites label {
    display: inline-block;
    cursor: pointer;
}


#sites label:hover {
    background-color: #efefef;
}

#sites label img {
    padding: 3px;
    
}

JavaScript

$('#sites input:radio').addClass('input_hidden');
$('#sites label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});