JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div id="wrapper">
    <label>click me</label>
    <input type="radio" />
</div>

CSS

.green{
    background:url('https://forum.jquery.com/viewImage.do?fileId=14737000002851734&forumGroupId=14737000000003003') no-repeat 50% 50%;
}
.yellow{
    background:url('https://forum.jquery.com/viewImage.do?fileId=14737000002851738&forumGroupId=14737000000003003') no-repeat 50% 50%;
}
.red{
  background:url('https://forum.jquery.com/viewImage.do?fileId=14737000002851740&forumGroupId=14737000000003003') no-repeat 50% 50%;
}
div{padding:10px;margin:10px;}

JavaScript

$('input').addClass('green');
var colors = ['green', 'yellow', 'red'];
var curr_color = 0;
$('a').click(function(e){
    e.preventDefault();
    curr_color = (curr_color + 1 < 3) ? curr_color + 1 : 0;
    $(this).removeClass().addClass(colors[curr_color]);
});