JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="box">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

* { -moz-box-sizing: border-box; box-sizing: border-box; }

.box > div {
    float: left;
    height: 200px;
    width: 33%;
    border: 1px solid black;
    -webkit-transition: background 0.3s;
}

.box > div.active {
    background: red;
}

JavaScript

(function ($) {
    var timeout,
        els = $('.box').children(),
        el = els.first().addClass('active'),
        el0 = el,
    
        startCycle = function () {
            function f() {
                el.removeClass('active');
                el = el.next().length ? el.next() : el0;
                el.addClass('active');
                timeout = setTimeout(f, 3000);
            }
            
            timeout = setTimeout(f, 3000);
        };
     
    els.on({
        mouseover: function (e) {
            var tg = $(e.target);
            if ( !tg.hasClass('active') ) {
                el.removeClass('active');
                el = tg.addClass('active');
            }
            clearTimeout(timeout);
        },
        mouseleave: function () {
            startCycle();
        }
    });
    
    startCycle();
})(jQuery);