JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll-wrapper">
    <div class="tabs-structure">
      <div class="tab-container">
        <div class="tab">Tab number 1</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 2</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 3</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 4</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 5</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 6</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 7</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 8</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 9</div>
      </div>
      <div class="tab-container">
        <div class="tab">Tab number 10</div>
      </div>
    </div>
</div>

CSS

/*thanx to 
  http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page#answer-13184693
*/
.scroll-wrapper{
    border: 1px solid black;
    width: 200px;
    overflow-x: scroll;
    /*making the scroll have momentum on mobile devices
    http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
    */
    -webkit-overflow-scrolling: touch;
  
}
/*hiding the scrollbar*/
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
 }
  
.tabs-structure{
    width: 100%;
    display: table;
    table-layout: fixed;
}  
    
.tab-container {
    width: 148px;
    height: 36px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    border-right: 1px solid black;
}
  
.tab-container:last-child{
    border-right: none;
}