JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a href="index.html">Home</a>
    </li><li>
    <a href="about.html">About</a>
    </li><li><a href="portfolio.html">Portfolio</a>
    </li><li id="logo"><a href="index.html"><img src="http://placehold.it/50x50/" /></a>
    </li><li><a href="projects.html">Projects</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
    <li><a href="classlist.html">Class List</a>
    </li>
    <!--change URL later-->
</ul>

CSS

ul#nav {
    margin:0;
    list-style-type: none;
    /*gets rid of bullets*/
    padding: 0;
    text-align:center;
    font-size: 0;
}
#nav li {
    margin:0;
    display: inline;
    /*display list horizontally*/
}
#nav a {
    display: inline-block;
    /*don't break onto new lines and follow padding accordingly*/
    padding:10px;
    border-top:1px solid #FFB405;
    border-bottom:1px solid #FFB405;
    margin:0;
    font-size: 16px;
}
ul#nav li#logo a {
    border-top:none;
    border-bottom:none;
    border: none;
}