JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="action-bar row">
    <div>
        <ul id="mainmenu" class="container menu">
            <li class="home active first"><a href="/">Home</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a href="/whatwedo">What We Do</a></li>
            <li class="last">
                <a href="/contact">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

CSS

#mainmenu {
 height: 17px;
 border-bottom: 1px dotted #ACBBCB;
 padding-bottom: 5px;
}

.action-bar .menu li {
 display:inline-block;
 line-height: normal;
}

.action-bar .menu li a {
 text-decoration: none;
 color: #000;
 display: inline-block;
}

#mainmenu li + li:before {
    content: '|';
    display:inline-block;
    padding: 0 6px;
}