JSFiddle - React, Tailwind, and code Playground

HTML

<div id='menubar'>
    <div id='menu'>
        <ul id='a_links'>
            <li><a href="index.html">Main Page</a>
            </li>
            <li><a href="">Member's Only</a>
            </li>
            <li><a href='EditMyInfo.php'>Edit Account</a>
            </li>
            <li><a href='Message.php'>Send Message</a>
            </li>
        </ul>
    </div>
</div>

CSS

#a_links {
    width: 930px;
    font-size: 14px;
    font-family: Frosty, Garamond;
    display: block;
    margin: 0px auto 0px auto;
    padding: 15px;
    text-align: center;
    border-top: 3px solid white;
    border-bottom: 2px solid white;
    background-color: black;
    position: relative;
}
.on {
    text-decoration:none;
    background-color: white;
    color: black;
}
#a_links a {
    text-decoration:none;
    color: white;
    width: 6.5em;
    padding: .2em 0 .2em 0;
    background-color: black;
    text-align: center;
    border-radius: 5px;
    float: left;
    border: 2px solid white;
    margin: left;
}
#a_links li {
    float: left;
    display: inline;
}
#a_links a:hover, a.on {
    text-decoration:none;
    background-color: white;
    color: black;
}