JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

<div class="nav">
     <ul class="navbuttons">
          <li>Some text</li>
          <li>Some text1</li>
          <li>Some text 2</li>
          <li>Some text text</li>
     </ul>
</div>

<div class="nav">
     <ul class="navbuttons">
          <li>A lot of text</li>
          <li>Some text1</li>
          <li>Some text 2</li>
          <li>Some text text</li>
          <li>Some text1</li>
          <li>Some text 2</li>
          <li>Some text text</li>
          <li>Some text1</li>
          <li>Some text 2</li>
          <li>Some text text</li>
          <li>Some text1</li>
          <li>Some text 2</li>
          <li>Some text text</li>
     </ul>
</div>

CSS

.navbuttons {
    display: inline-block;
    overflow: auto;
    overflow-y: hidden;

    max-width: 100%;
    margin: 0 0 1em;

    white-space: nowrap;

    background: #AAA;
}

.navbuttons LI {
    display: inline-block;
    vertical-align: top;
}