JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nbar">
    <ul>
        <li class='home'><a href='index.html'><span>Home</span></a>
        </li>
        <li class="roster"><a href='#'><span>Team</span></a>
        </li>
        <!--<li class="blog"><a href='#'><span>Blog</span></a></li>-->
        <li style="background-color:#454545;"> <a>LAST SPAN</a>

        </li>
    </ul>
</div>

CSS

.nbar {
    height:37px;
    display:table;
    table-layout: fixed;
    margin:0;
    padding:0;
    border-bottom: 1px solid #000;
    width:1000px;
    background:#000;
}
.nbar > ul > li > a {
    outline:none;
    display:block;
    position:relative;
    font:bold 13px/100% Arial, Helvetica, sans-serif;
    text-align:center;
    text-decoration:none;
    text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4);
    border-right:1px solid #000;
    color:#fff;
    padding:12px 20px;
}
.nbar > ul {
    list-style:inside none;
    margin:0;
    padding:0;
    display: table-row;
    width:100%;
}
.nbar > ul > li {
    list-style:inside none;
    float:left;
    position:relative;
    margin:0;
    padding:0;
}

.nbar > ul > li:last-child{
    float:none;
    overflow:hidden;
}