JSFiddle - React, Tailwind, and code Playground

by Matthew Sullivan

HTML

<div id="navigation">
  <ul>  
    <li><a href="">One</a></li>
    <li><a href="">Two</a></li>
    <li><a href="">Three</a></li>
  </ul>
</div>

CSS

#navigation
{
    display:block;
    background-color:#222222;
    height:auto;
    padding:0%;
     text-align:center;
}
#navigation li
{
    border-right: solid 1px #ca0002;
    height: 35px;
    display: inline-block;
    margin: 0 auto;
}

#navigation li a:link, #navigation li a:visited
{
    text-decoration: none;  
    display: block;
    height: 35px;
    color: #fff;
    line-height: 35px;
    padding: 0 20px 0 20px;
    border-right: solid 1px #990000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

#navigation li a:hover
{
    background: #990000;
    color: #fff;
}

#navigation li.first
{
    border-left: solid 1px #ca0002;
}