JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
    <li class="first"><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a</li>
    <li><a href="#">Link Three</a</li>
    <li><a href="#">Link Four</a</li>
    <li><a href="#">Link Five</a</li>
    <li><a href="#">Link Fiveb</a</li>
    <li class="last"><a href="#">Link Six</a</li>
</ul>

CSS

ul.navigation {
    width: 100%;
    display: table ;
    }
    
    ul.navigation li {
        float: none;
        display: table-cell;
        text-align: center;
        }

        ul.navigation li a {
            text-decoration: none;
            }
        
        ul.navigation li.first {
            text-align: left;
            }
            
        ul.navigation li.last {
            text-align: right;
            }