JSFiddle - React, Tailwind, and code Playground

by juanojeda

HTML

<div id="clickToColour">CLICK ME TO CHANGE COLOUR</div>

CSS

div {
    width: 200px;
    font-size: 36px;
    font-weight: bold;
    font-family: Helvetica, Arial,sans-serif;
    background-color: #333;
    color: #fff;
    -webkit-transition: background 1s ease;
    -moz-transition: background 1s ease;
    -ms-transition: background 1s ease;
    -o-transition: background 1s ease;
    transition: background 1s ease;
}
.red {
    background-color: #990000;
}
.blue {
    background-color: #003377;
}
.green {
    background-color: #33AA22;
}

JavaScript

$('#clickToColour').click(function() {
    if ($(this).hasClass('red')) {
        $(this).toggleClass('blue red');
    }
    else if ($(this).hasClass('blue')) {
        $(this).toggleClass('green blue');
    }
    else if ($(this).hasClass('green')) {
        $(this).toggleClass('red green');
    }
    else {
        $(this).addClass('red');
    }

});