JSFiddle - React, Tailwind, and code Playground

by mischah

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<div id="container" class="0"></div>

CSS

#container {
    border-radius: 100px;
    height: 200px;
    width:200px;
    transition: background-color 1s ease-in;
}

.\31 00 {background-color: #710000; }
.\35 0 {background-color: #ee6000; }
.\30 {background-color: #fdd67b; }

JavaScript

(function(){
    var container = $('#container');
    
    function changeColor() {
        console.log('huhu');
        switch (container.attr('class')) {
            case '0':
                container.removeClass('0').addClass('50');
                break;
            case '50':
                container.removeClass('50').addClass('100');
                break;
            case '100':
                container.removeClass('100').addClass('0');
                break;
            default:
                container.addClass('0');
        }
    }
    
    setInterval(changeColor, 3000);
})();