JSFiddle - React, Tailwind, and code Playground

by Nikita Jadhao

HTML

<div class="redio-box">
    <input name="sms_notification" class="radio" type="radio" value="1" checked="checked">
        <label for="subscribe"><span class="redio"></span> Subscribe</label> </input>
    <input name="sms_notification" class="radio" type="radio" value="0"> <label for="unsubscribe"><span class="redio"></span> Unsubscribe</label> </input>
</div>

CSS

.redio-box .radio {
    display:none;
    *display:inline; 
    background:none; 
    width:auto;
}
.redio-box .radio + label { display:inline; font-size:12px; color:#C3B496; }
.redio-box .radio + label span {
    display:inline-block; *display:none;
    width:10px;
    height:10px;
    margin:-2px 2px 0 4px;
    vertical-align:middle;
    background:url(https://lh4.ggpht.com/tfumE8xhOyGr33JKe-Wk5TJKNIOt_qaPW5rDKIhvjAis9qmlsgc91Devz0RoHodZoim-jg=s56) -30px top no-repeat;
    cursor:pointer;
}
.redio-box .radio:checked + label span {
  background:url(https://lh4.ggpht.com/tfumE8xhOyGr33JKe-Wk5TJKNIOt_qaPW5rDKIhvjAis9qmlsgc91Devz0RoHodZoim-jg=s56) -45px top no-repeat;
}

JavaScript

$(document).ready(function(){
    $(".redio").click(function(){
        alert("x")
     }
});