JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
<div class="scrolls">
    <div class="content1">Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here </div>
    
</div></div>

CSS

.scrolls {
    height:250px;
    background:000;
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
    
}
.content {
    width:300px;
    height:200px;
   
}

JavaScript

$(document).ready(function() {
    var sL = 4000;
    $('.scrolls').animate({
        scrollLeft : sL
    },100000, 'linear')
    
$(".scrolls").on("click",function(){
        $(this).stop(true,false);
});
})