JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul class="topbar">
    <li><a href="pages/index.html" class="fade">Home Page</a></li>
    <li><a href="pages/userprofile.html" class="fade">Profile</a></li>
    <li><a href="pages/createacc.html" class="fade">Create an Account</a></li>
    <li><a href="pages/settings.html" class="fade">User Settings</a></li>
    <li><a href="pages/contact.html" class="fade">Contact Us</a></li>
  </ul>
</div>

CSS

ul.topbar li
{
    list-style-type:none;
    display:inline-block;
    padding:5px 10px;
}

ul.topbar {
    width: 700px ;
    background-color: #2b2b2b;
    margin:0;
    padding:0;
}

ul.topbar a
{
    color:#950095;
    text-decoration:none;
}
ul.topbar a:hover
{
    color:#FFF;
    text-decoration:underline;
}