JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport">
    <div class="inside">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

<div class="three-l">Green</div>
<div class="two-l">Blue</div>
<div class="one-l">Red</div>

CSS

.viewport{
    width:200px;
    height:200px;
    overflow-x:hidden;
    
}

.inside{
    width:1000px;
    height:200px;
}

.inside div{
    height:200px;
    width:200px;
    float:left;
}

.one{
    background-color:red;
}

.two{
    background-color:blue;
}

.three{
    background-color:green;
}

JavaScript

$(".three-l").click(function() {
  $(".viewport").animate({scrollLeft: 400}, 500);
});
$(".two-l").click(function() {
  $(".viewport").animate({scrollLeft: 200}, 500);
});
$(".one-l").click(function() {
  $(".viewport").animate({scrollLeft: 0}, 500);
});