JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li><a href="">lorem 1</a></li>
    <li><a href="">lorem 2</a></li>
    <li><a href="">lorem 3</a></li>
    <li><a href="">lorem 4</a></li>
    <li><a href="">lorem 5</a></li>
    <li><a href="">lorem 6</a></li>
  </ul>
</nav>

CSS

nav {
  width: 22rem;
  background-color: yellow;
}

ul {
  display: flex;
  padding: 1rem 0;
  overflow-x: auto;
}

li {
  list-style-type: none;
}

a {
  white-space: nowrap;
  display: inline-block;
  padding: 1rem;
  background-color: #4f48;
}