JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
     <div id="upperNavLinks">
        <ul>
          <li><a href="Option1.aspx" target="_self">Option 1</a></li>
            <li class="border"></li>
          <li><a href="Option2.aspx" target="_self">Option 2</a></li>
            <li class="border"></li>
          <li><a href="Option3.aspx" target="_self">Option 3</a></li>
            <li class="border"></li>
          <li><a href="Option4.aspx" target="_self">Option 4</a></li>
            <li class="border"></li>
          <li><a href="Option5.aspx" target="_self">Option 5</a></li>
        </ul>   
        </div>
     </div>

CSS

#menu
   {
       width:1024px;
       height:63px;
       background: #CCC;
       margin:0px;
   }

#upperNavLinks
{
    float:left;
    padding-top:0px;
    padding-left:0px;  
}



#upperNavLinks ul li
{
    float:left;
}
#upperNavLinks ul li.border
{
    display: block;
    width:1px;
    height: 20px;
    background: #FFFFFF;
}

#upperNavLinks ul a {
    padding-right: 18px;
    padding-left: 18px;
    display: block;
    text-decoration: none;
    font-family:PT Sans, Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight:bold;
    color: #333333;
}

#upperNavLinks ul a:hover 
{
    font-weight:bold;
    color: #a31624;
}