JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<input type='button' class='leftArrow' value='left'>
<input type='button' class='rightArrow' value='right'>

<div class='outerWrapper'>
   <div class='innerWrapper'>
         <span>tabitem First</span>
         <span>tabitem 2</span>
         <span>tabitem 3</span>
         <span>tabitem 4</span>
         <span>tabitem 5</span>
         <span>tabitem 6</span>
         <span>tabitem 7</span>
         <span>tabitem 8</span>
         <span>tabitem 9</span>
         <span>tabitem Last</span>

   </div>
</div>

CSS

.innerWrapper
{
 
    white-space: nowrap;
}
.outerWrapper
{
	width: 780px;	
	overflow: auto;
border:solid 1px red;
    height: 50px;
}
.innerWrapper span {display:inline-block; border:solid 1px red; margin:0 0 0 16px; width:180px;}
.innerWrapper span:first-child {margin-left:0; }
.outerWrapper::-webkit-scrollbar, .outerWrapper::-webkit-scrollbar-track {     visibility: hidden;  display:hidden; background:transparent;}

JavaScript

$('.leftArrow').click(function(event){
    event.preventDefault();
    $('.outerWrapper').animate({scrollLeft:'+=500'},180);
});

$('.rightArrow').click(function(event){
    event.preventDefault();
    $('.outerWrapper').animate({scrollLeft:'-=500'},180);
});