JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>asfdjsanfjkdsajkfsdkjfjksdfj dfjdshfjsdjfhjsdhfjkshdjfsdf sdakjflkdsjfklsdjkfjklsdf</p>
    <li class="variant"><input id="product_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked /><label class="variant_name" for="product_1">Белый</label><span class="price">44 000 <span class="currency">руб</span></span></li>
    
    <li class="variant"><input id="product_2" name="variant" value="2" type="radio" class="variant_radiobutton"  /><label class="variant_name" for="product_2">Черный</label> <span class="price">42 000 <span class="currency">руб</span></span></li>
</div>

CSS

div {
    height: 150px;
    background: yellow;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

JavaScript

$(function() {
    
    $('#product_1').on('click', function() {
        var foo=$(this).closest('li');
        foo.removeAttr('class');
        foo.addClass('red');
    })
    $('#product_2').on('click', function() {
        var foo=$(this).closest('li');
        foo.removeAttr('class');
        foo.addClass('blue');
    })
});