JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <span class="arrow">&lt;</span>
  <span class="arrow">&gt;</span>
  <ul id="nav">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
    <li>List 13</li>
  </ul>
</div>

CSS

* {
  margin:0;
  padding:0;
}
#wrapper {
  width:calc(100% - 120px);
  height:60px;
  background-color:#dbdbdb;
  padding:0 60px;
  margin-top:60px;
  font-family:helvetica;
  overflow:hidden;
  position:relative;
  z-index:99; 
}
.arrow {
  display:block;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  background-color:#cccccc;
  font-weight:bold;
  cursor:pointer;
  position:absolute;
  top:0;
  z-index:101;
}
.arrow:first-of-type {
  left:0;
}
.arrow:nth-of-type(2) {
  right:0; 
}
#nav {
  width:auto;
  height:60px;
  overflow:hidden;
  list-style-type:none;
  white-space:nowrap;
  transition:2.0s;
}
#nav li {
  display:inline-block;
  height:60px;
  line-height:60px;
  font-size:13px;
  padding:0 30px;
}

JavaScript

$(".arrow:first-of-type").click(
    function() {
        var navwidth = $("#nav");
        navwidth.scrollLeft(navwidth.scrollLeft() - 200);
    }
);
$(".arrow:nth-of-type(2)").click(
    function() {
        var navwidth = $("#nav");
        navwidth.scrollLeft(navwidth.scrollLeft() + 200);
    }
);