JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio">

CSS

body {
    padding: 20px;  
}
input[type="radio"] {
    width: 12px;
    height: 12px;
    display: block;
    border: 1px solid #fff;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
    background: -moz-linear-gradient(top,  #ffffff,  #f0f0f0); 
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    border-radius: 3em;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="radio"]:checked {
    background: -o-gradient(linear, left top, left bottom, from(#a3a3a3), to(#4b4b4b));
    background: -o-linear-gradient(top,  #a3a3a3,  #4b4b4b); 
}

input[type="radio"]:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#ffffff));
    background: -o-linear-gradient(top,  #d2d2d2,  #ffffff); 
}

input[type="radio"]:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#bababa), to(#f0f0f0));
    background: -o-linear-gradient(top,  #bababa,  #f0f0f0); 
}