JSFiddle - React, Tailwind, and code Playground

by zumwalt

HTML

<h3 style="margin-top: 30px !important;">Radio Buttons</h3>
                                
     <input type="radio" name="radio-1" id="radio-1">
     <label for="radio-1">Radio 1</label>
                                
     <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;
            $(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');
            });
        });

            
    });