JSFiddle - React, Tailwind, and code Playground

HTML

<h3 style="margin-top: 30px !important;">Radio Buttons</h3>
  
     <input type="radio" name="radio-1" id="radio-2">
     <label for="radio-2">Radio 2</label>

CSS

/* Radio Buttons */               
    div.radio-container {
           margin: 0 auto;
        overflow: hidden;
        width: 300px;
           }
           div.radio-container:hover .radio{
               background-color: #fafafa;
               }
           
           div.radio {
               background: url("../images/kiosk/check.gif") no-repeat scroll 10px 10px #EFEFEF;
            border: 1px solid #CCCCCC;
            border-radius: 25px 25px 25px 25px;
            box-shadow: 0 2px 0 #FFFFFF inset;
            cursor: pointer;
            float: left;
            height: 50px;
            width: 50px;
               }
               div.radio:hover, div.radio.hover {
                   background-color: #fafafa;
                   }
               div.radio.selected {
                   box-shadow: inset 0 0 10px #999999;
                   background-position: 10px -110px;
                   }
                   
               div.radio-container label {
                   cursor: pointer;
                   float: left;
                margin-left: 15px;
                margin-top: 15px;
                   }

JavaScript

$('input:radio').each(function() {
    var name = $(this).attr('name');
    var id = $(this).attr('id');
    var radio = $('input[id="' + id + '"]');
    
    $(this).after('<div class="radio-container ' + id + '">\
             <div class="radio radio-' + id + '"></div></div>');
    
    $('div.radio-' + id + '').click(function() {
        radio.checked;
        $(".radio").removeClass("selected");
        $(this).toggleClass('selected');
    });
    
    $('label[for=' + id + ']').appendTo('div.radio-container.' + id + '');
    $('label[for=' + id + ']').hover(function() {
        $('div.radio-' + id + '').toggleClass('hover');
        $(this).click(function() {
            $('div.radio-' + id + '').toggleClass('selected');
        });
    });


});