JSFiddle - React, Tailwind, and code Playground

by DoubleYo

HTML

<div id="main"> 
    <nav id="main-navigation">
        <ul>
                <li id="nav1"><a href="#">Lorem ipsum dolor sit ametzu</a></li>
                <li id="nav2"><a href="#">Lorem ipsum dolor sit am</a></li>
                <li id="nav3"><a href="#">Lorem ipsum dolor sitd</a></li>
                <li id="nav4"><a href="#">Lorem ipsum dolo</a></li>
                <li id="nav5"><a href="#">Lorem ipsum do</a></li>
        </ul>
    </nav>
</div>

CSS

#main{
    width: 864px; 
    margin: 0 auto;
}    

nav#main-navigation li{    
    margin: 0;
    padding: 0;
    border-right: 1px dotted #222;
    color: #222;  
    position: relative;
    display:inline-block;
    margin-right: -4px;        
}

nav#main-navigation li a{
    display: block;
    padding:15px 10px;
    font: 11px/12px sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}
    
nav#main-navigation li:last-child  { border: 0;}