JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-padding">
    <div id="wrapper-slider">
        <div class="item-slider item-slider1"></div>
        <div class="item-slider item-slider2"></div>
        <div class="item-slider item-slider3"></div>
    </div>
</div>

CSS

* {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    font-size: 62.5%;
}

ul, ol {
    list-style-type: none;
}

.main-padding {
    padding: 20px;
}


#wrapper-slider {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.item-slider {
    width: 100%;
    float: left;
    height: 100%;
}

.item-slider1 {
    background-color: red;
}

.item-slider2 {
    background-color: blue;
}

.item-slider3 {
    background-color: yellow;
}

JavaScript

$(function () {
    
    var item = ".item-slider";
    var next = 1;
    setInterval(function() {
        $(item + next).animate({"marginLeft": "-100%"}, 1000);
        next++;
    }, 2000);
    
});