JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="container">
        <div id="a" class="child">a</div>
        <div id="b" class="child">b</div>
        <div id="c" class="child">c</div>
    </div>
</div>

CSS

#wrapper {
            position: relative;
            width: 450px;
            height: 150px;
            margin: 0 auto;
            overflow: hidden;
        }
        #container {
            position: absolute;
            width: 450px;
            height: 150px;
        }
        .child {
            width: 150px;
            height: 150px;
            padding-top: 35px;
            float: left;
            text-align: center;
            font-size: 60px;
        }
        #a {
            background: #FF0000;
        }
        #b {
            background: #FFFF00;
        }
        #c {
            background: #00FFFF;
        }

JavaScript

var firstval = 0;

function Carousel() {
    firstval += 2;
    parent = document.getElementById('container');
    parent.style.left = "-" + firstval + "px";
    if (!(firstval % 150)) {
        setTimeout(Carousel, 3000);
        firstval = 0;
        var firstChild = parent.firstElementChild;
        parent.appendChild(firstChild);
        parent.style.left= 0;
        return;
    }
    runCarousel = setTimeout(Carousel, 20);
}
Carousel();