JSFiddle - React, Tailwind, and code Playground

by Wendell Christian

HTML

<div id="product">
        <div class="form-group required">
            <label class="control-label">Cor Palmilha</label>
            <div id="input-option238">
                <div class="radio">
                    <label>
                        <input type="radio" name="option[238]" value="56">
                            <img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg" alt="Cinza" class="img-thumbnail"> 
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="option[238]" value="55">
                            <img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg" alt="Verde" class="img-thumbnail"> 
                    </label>
                </div>
            </div>
        </div>
        
        <div class="form-group required">
            <label class="control-label">Cor Solado</label>
            <div id="input-option239">
                <div class="radio">
                    <label>
                        <input type="radio" name="option[239]" value="66">
                            <img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg" alt="Cinza" class="img-thumbnail"> 
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="option[239]" value="67">
                            <img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg" alt="Verde" class="img-thumbnail"> 
                    </label>
                </div>
            </div>
        </div>
    </div>

CSS

#product .radio {
    display: inline-block;
	margin-right:10px;
}
.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.radio input[type=radio] {
    position: absolute;
    margin-top: 4px\9;
    margin-left: -20px;
}
#product .radio label {
    display: block;
    background: none;
    color: #111111;
    text-align: center;
    border: none;
    padding: 0;
	font-size:0;
}
#product .radio label input {
	margin-left: 15px;
  display:none;
}

JavaScript

$(function(){
  $('input[type=radio]').on('change',function(){
    $('.radio').css('border','');
    $(this).parent().parent().css('border','2px solid red');
  });
});