JSFiddle - React, Tailwind, and code Playground

by Rob Crowther

HTML

<nav>
    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link the third</a></li>
        <li><a href="#">Link four</a></li>
        <li><a href="#">Link five</a></li>
        <li><a href="#">Link six</a></li>
    </ul>
</nav>

<nav>
    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link the third</a></li>
        <li><a href="#">Link four</a></li>
        <li><a href="#">Link five</a></li>
        <li><a href="#">Link six</a></li>
    </ul>
</nav>



<nav>
    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link the third</a></li>
        <li><a href="#">Link four</a></li>
        <li><a href="#">Link five</a></li>
        <li><a href="#">Link six</a></li>
    </ul>
</nav>

CSS

nav {
    width: 640px;
    border: 1px solid #666;
    margin: 1em 0;
}
nav:first-child { 
    width: 480px;
}
nav:last-child {
    width: 800px;
}
ul {
    display: table;
    width: 100%;
}
li {
    display: table-cell;
    border: 1px solid #ccc;
}
a {
    display: block;
    padding: 0.5em;
}