JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">
    <div id="scroll">
        <div id="content">
            <div class="item">item1</div>
            <div class="item">item2</div>
            <div class="item">item3</div>
            <div class="item">item4</div>
        </div>
    </div>
</div>

CSS

#first {width:300px;height:150px;border:1px solid pink;}
#scroll {position:relative;width:100%;overflow:hidden;background-color:blue;}
#content {width:400%;}
#content .item {float:left;width:25%;height:150px;}

JavaScript

//Init
$("#content").css("marginLeft","0%");
console.log("Init "+$("#content").css("marginLeft"));

//Go !
myAnime(1);


function myAnime(step)
{
    //Animate
    $("#content").animate({marginLeft:'-=100%'},400,function(){
        console.log("Style step "+step+" :"+$("#content").attr("style"));
        console.log("Margin step "+step+" :"+$("#content").css("marginLeft"));
        
    //All it's done, let's try a second step
    if(step==1)
        myAnime(2);
    });
}