JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-tabs">
    <div class="wrapper">
        <ul class="list">
             <li>Item 1</li>
             <li>Item 2</li>
             <li>Item 3</li>
             <li>Item 4</li>
             <li>Item 5</li>
             <li>Item 6</li>
             <li>Item 7</li>
             <li>Item 8</li>
             <li>Item 9</li>
             <li>Item 10</li>
             <li>Item 11</li>
             <li>Item 12</li>
             <li>Item 13</li>
             <li>Item 14</li>
             <li>Item 15</li>
             <li>Item 16</li>
             <li>Item 17</li>
             <li>Item 18</li>
             <li>Item 19</li>
             <li>Item 20</li>
        </ul>
    </div>
    <button class="scroller scroller-left">&larr;</button>  
    <button class="scroller scroller-right">&rarr;</button> 
</div>

CSS

#page-tabs{position:relative; width:100%; margin-top:50px;}
.scroller{width:30px;height:30px;position:absolute;top:0;}
.scroller-left{left:0;}
.scroller-right{right:0;}
.wrapper{position:relative; margin:0 34px; overflow:hidden; height:30px; background:#454545;}
ul{position:absolute;margin:0;padding:0; list-style:none; min-width:3000px;}
li{display:inline-block; margin:0; padding:10px;background:#CCC;}

JavaScript

var hidWidth;
   var scrollBarWidths = $('#page-tabs .scroller-right').width() + $('#page-tabs .scroller-left').width();

   var widthOfList = function(){
      var itemsWidth = 0;
      $('#page-tabs .list li').each(function(){
         var itemWidth = $(this).outerWidth();
         itemsWidth+=itemWidth;
      });
      return itemsWidth;
   };

   var widthOfHidden = function(){
      return (($('#page-tabs .wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
   };

   var getLeftPosi = function(){
      return $('#page-tabs .list').position().left;
   };

   var timeout;
   $list = $('#page-tabs .list');
   $('#page-tabs .scroller-right').on('mousedown', function(event) {
      event.preventDefault();
      timeout = setInterval(function(){
         move = widthOfHidden();
         move = move < -10 ? -10 : move;

         if (move >= 0){
            clearInterval(timeout);
            return false;
         } else {
            $list.animate({left:"+="+move+"px"},10, 'linear');
         }
      }, 10);
   }).on('mouseup mouseleave', function(event){
      event.preventDefault();
      clearInterval(timeout);
   });

   $('#page-tabs .scroller-left').on('mousedown', function(event) {
      event.preventDefault();
      timeout = setInterval(function(){
         move = getLeftPosi();
         move = move < -10 ? -10 : move;

         if (move >= 0){
            clearInterval(timeout);
            //$list.animate({left:"0px"},300, 'linear');
            return false;
         } else {
            $list.animate({left:"-="+move+"px"},10, 'linear');
         }

      }, 10);

   }).on('mouseup mouseleave', function(event){
      event.preventDefault();
      clearInterval(timeout);
   });