JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div class="dropdown-menu skin-chooser">
     <h4>Pass/Fail</h4>
    <div class="radio-group">
        <div class="relative">
            <input type="radio" id="skin-1" name="skin-1" />
            <label for="skin-1">
                <img src="http://placehold.it/180x20" alt="img" />
            </label>
        </div>
        <div class="relative">
            <input type="radio" id="skin-2" name="skin-1" />
            <label for="skin-2">
                <img src="http://placehold.it/180x20" alt="img" />
            </label>
        </div>
        <div class="relative">
            <input type="radio" id="skin-3" name="skin-1" />
            <label for="skin-3">
                <img src="http://placehold.it/180x20" alt="img" />
            </label>
        </div>
    </div>
     <h4>Pass/Fail</h4>

    <div class="radio-group">
        <div class="relative">
            <input type="radio" id="skin-4" name="skin-2" />
            <label for="skin-4">
                <img src="http://placehold.it/180x20" alt="img" />
            </label>
        </div>
        <div class="relative">
            <input type="radio" id="skin-5" name="skin-2" />
            <label for="skin-5">
                <img src="http://placehold.it/180x20" alt="img" />
            </label>
        </div>
        <div class="relative">
            <input type="radio" id="skin-6" name="skin-2" />
            <label for="skin-6">
                <img src="http://placehold.it/180x20" alt="img" />
            </label>
        </div>
    </div>
</div>

CSS

.skin-chooser {
    width:200px;
    background-color:#333;
    color:#fff;
}
.skin-chooser h4 {
    margin:0;
    text-align:center;
}
.skin-chooser .relative {
    position:relative;
}
.skin-chooser .relative label {
    display:block;
    padding:5px 10px;
}
.skin-chooser .relative .active {
    background-color:green;
}
.skin-chooser .relative input[type="radio"] {
    position:absolute;
    left:15px;
    top:10px;
    margin:0;
    z-index:-1;
}

JavaScript

$(function () {
    $('.radio-group').find('input:radio').change(function () {
        var $this = $(this);
        $this.closest('.radio-group').find('.relative').children('label').removeClass('active');
        $this.closest('.relative').children('label').addClass('active');
    });
});