JSFiddle - React, Tailwind, and code Playground

HTML

<div id="featured-cakes">
    <div class="featured">
        a
    </div>
    <div class="featured">
        b
    </div>
    <div class="featured">
        c
    </div>
    <div class="featured">
        d
    </div>
    <div class="featured">
        e
    </div>
</div>

CSS

.featured {
            float: left;
            height: 50px;
            width: 50px;
            margin-right: 10px;
            background-color: red;
            border: 3px solid black;
        }

JavaScript

$(document).ready(function(){

            call_rotator();
        }); 

        function call_rotator() {
            var x = setTimeout("rotator()", 1
            );
        }


        function rotator() {
            var clone = $(".featured:first").clone();
            clone.hide();
            clone.appendTo("#featured-cakes");
            $(".featured:first").hide("slide", { direction: "left" }, 3000).hide("blind", { direction: "horizontal" }, 3000).dequeue();
            $(".featured:last").show("blind", { direction: "horizontal" }, 3000, function() {
                $(".featured:first").remove().delay(1);
                call_rotator();
            });
        }