JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<div id='radiogroup'>
    <div class='radio'></div>
    <br />
    <div class='radio'></div>
    <br />
    <div class='radio'></div>
</div>

CSS

body {
    background: #252525;
}
.radio {
    width: 15px;
    height: 15px;
    background: #4a4a4a;
    cursor: pointer;
    border-radius: 100%;
}
.radio:hover {
    background: #656565;
}
.radio.active {
    background: #96f226;
}

JavaScript

$(document).ready(function(){
    $('.radio').click(function(){
        $(this).toggleClass('active');
        $('.radio').click(function(){
            $('.radio').removeClass('active');
            $(this).addClass('active');
            $(this).click(function(){
                $(this).removeClass('active');
            });
        });
    });
});