JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="boxes">
        <div class="one">
        </div>
        <div class="two">
        </div>
        <div class="three">
        </div>
    </div>
</div>


<div class="container1" style="color: blue;">
  aa
</div>
<div class="container2" style="color: blue;">
  aaa
</div>

CSS

.container{
    width:100px;
    height:100px;
    overflow:hidden;
    position:relative;
}
.one,.two,.three{
    display:inline-block;
}
.one{
    width:100px;
    height:100px;
    background-color:green;
}
.two{
    width:100px;
    height:100px;
    background-color:red;
}
.three{
    width:100px;
    height:100px;
    background-color:blue;
}
.boxes{
    width:400px;

}

JavaScript

$(document).ready(function(){
    $('.container2').click(function(){
        $('.boxes').offset({left : $('.boxes').offset().left-100})
        });
        
          $('.container1').click(function(){
        $('.boxes').offset({left : $('.boxes').offset().left+100})
        });
    });