JSFiddle - React, Tailwind, and code Playground

HTML

<button id="left">&laquo;</button>
    <button id="right">&raquo;</button>
    <div class="box">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>

CSS

.box{
    width: 600px;
    background-color: #000;
    overflow:hidden;
    white-space: nowrap;
}
.block {
    display:inline-block;
    background-color: #abc;
    left: 0;
    width: 90px;
    height: 90px;
    margin: 5px;
    margin-left: 10px;
}

JavaScript

$( "#right" ).click(function() {
        $( '.box' ).animate({
            scrollLeft: '+=' + $('.box').width()
        });
    });
    $( "#left" ).click(function(){
        $( '.box' ).animate({
            scrollLeft: '-=' + $('.box').width()
        });
    });