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.firstChild;
            parent.removeChild( firstChild );
            parent.appendChild( firstChild );
            return;
          }
          runCarousel = setTimeout(Carousel, 20);
        }
        Carousel();