JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab-navigation">
  <button class="tab-control arrow-left" onclick="moveNavigation(-500)">
    &lt;
  </button>
  <button class="tab-control arrow-right" onclick="moveNavigation(500)">
    &gt;
  </button>

  <div class="tab">
    <button class="tablinks" onclick="return openCity(event,'London')">Jan 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Paris')">Feb 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Tokyo')">Mar 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">April 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">May 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">June 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Paris')">July 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Tokyo')">August 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">September 2017</button>
    <button class="tablinks" onclick="openCity(event,'London')">October 2017</button>
    <button class="tablinks" onclick="openCity(event,'London')">Novenber 2017</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">December 2017</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Jan 2018</button>
    <button class="tablinks" onclick="openCity(event,'London')">Feb 2018</button>
  </div>
</div>

<div id="London" class="tabcontent">
  <h3>Januaray</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Febrary</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>March</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

CSS

/* Style the tab */

.tab-navigation {
  border: 1px solid #ccc;
}

.tab {
  overflow-x: hidden;
  white-space: nowrap;
  background-color: #f1f1f1;
  margin-left: 30px;
  margin-right: 30px;
}


/* Style the buttons inside the tab */

.tab button,
.tab-control {
  background-color: inherit;
  /* float: left; */
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.arrow-left {
  float: left;
}

.arrow-right {
  float: right;
}

.tab-control {
  background-color: #ddd;
}

JavaScript

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
  return false;
}

function moveNavigation(byX) {
  var navigation = document.getElementsByClassName("tab")[0];
  navigation.scrollLeft = navigation.scrollLeft + byX;
}