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: 0;
    margin: 1em 0;
    padding: 0;
    background-color: red;
    /*outline: 1px solid #ccc;*//*Uncomment this to confirm extent of nav */
}
nav:first-child { 
    width: 480px;
}
nav:last-child {
    width: 800px;
}
ul {
    display: table;
    width: 100%;
    border: 0;
    padding: 0;
    background-color: blue;
}
li {
    display: table-cell;
    border: 0;
    padding: 0;
    text-align: center;
}
li:first-child {
    text-align: left;
}
li:last-child {
    text-align: right;
}
a {
    display: block;
    padding: 0.25em 0;
    background-color: white;
    text-decoration: none;
}