JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        <div id="arrowL" class="active">
        </div>
        <div id="arrowR">
        </div>
        <div id="list-container">
            <div class='list'>
                <div class='item'>
                </div>
                <div class='item'>
                </div>
                <div class='item'>
                </div>
                <div class='item'>
                </div>
                <div class="item">
                </div>
                <div class='item'>
                </div>
                <div class='item'>
                </div>
                <div class='item'>
                </div>
                <div class="item">
                </div>
            </div>
        </div>

CSS

#container{
    width:340px;
    height:50px;
}

#list-container {
overflow:hidden;    
width: 300px;  
float:left;    
}

.list{
    background:grey;
    min-width:1400px;
    float:left;
}


#arrowR{
    background:yellow;
    width:20px;
    height:50px;
    float:right;
    cursor:pointer;
}

#arrowR.active{
background:black;
    cursor:default;
}

#arrowL{
background:yellow;
    width:20px;
    height:50px;
    float:left;
    cursor:pointer;
}

#arrowL.active{
    background:black;
    cursor:default;
}
.item{
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative;
}

JavaScript

$(document).ready(function() {
    
    var $item = $('div.item'), //Cache your DOM selector
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1; //End index
    
    $('div#arrowR').click(function(){
        if(index < endIndex ){ //can scroll
          index++;
          $item.animate({'left':'-=300px'});
        }
    });
    
    $('div#arrowR').click(function(){
        if(index > endIndex ){ //can't scroll
            $('div#arrowR').addClass('active');
        }     
    });
    
    $('div#arrowR').click(function(){
        if(index < endIndex ){ //can scroll
            $('div#arrowL').removeClass('active');
        }     
    });
    
    
    
    $('div#arrowL').click(function(){
        if(index > 0){ //can scroll
          index--;            
          $item.animate({'left':'+=300px'});    
        }
    });
    
    $('div#arrowL').click(function(){
        if(index < 0 ){ //can't scroll
            $('div#arrowL').addClass('active');
        } 
    });        
    
    $('div#arrowL').click(function(){
        if(index > 0 ){ //can scroll
            $('div#arrowR').removeClass('active');
        }
    });   
    
    
});