JSFiddle - React, Tailwind, and code Playground

by NGLN

HTML

<div id="nav" class="wide">
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
        <li><a href="">Link 6</a></li>
        <li><a href="">Link 7</a></li>
        <li><a href="">Link 8</a></li>
        <li><a href="">Link 9</a></li>
    </ul>
    <span></span>
</div>
<br />
<br />
<div id="nav">
    <ul>
        <li><a href="">Link a</a></li>
        <li><a href="">Link b</a></li>
        <li><a href="">Link c</a></li>
        <li><a href="">Link d</a></li>
        <li><a href="">Link e</a></li>
        <li><a href="">Link f</a></li>
        <li><a href="">Link g</a></li>
    </ul>
    <span></span>
</div>
<br />
<br />
<div id="nav" class="narrow">
    <ul>
        <li><a href="">Link I</a></li>
        <li><a href="">Link II</a></li>
        <li><a href="">Link III</a></li>
    </ul>
    <span></span>
</div>

CSS

#nav {
    text-align: justify;
    width: 600px;
}
#nav ul {
    display: inline;
}
#nav li {
    display: inline;
}
#nav span {
    display: inline-block;
    width: 100%;
}
#nav a {
    display: inline-block;
    padding: 0 .5em 0 .5em;
    border: 1px solid black;
}
#nav.wide {
    width: 100%;
}
#nav.narrow {
    width: 300px;
}