JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav"> <a href="" id="nav-icon"> <img src="navigation.png" alt="nav-menu"> </a>

    <ul>
        <li> <a href="#"> LINK1 </a> 
        </li>
        <li> <a href="#"> LINK2 </a> 
        </li>
        <li> <a href="#"> LINK3 </a> 
        </li>
        <li> <a href="#"> LINK4 </a> 
        </li>
        <li> <a href="#"> LINK5 </a> 
        </li>
        <li class="navimage"> <a href="twitter.com"> <img src="twitter-icon.png" alt="twitter-icon" /> </a> 
        </li>
        <li class="navimage"> <a href="facebook.com"> <img src="facebook-icon.png" alt="facebook-icon" /> </a> 
        </li>
    </ul>
</div>

CSS

#nav {
    border-bottom:1px solid #FFF;
    margin-bottom:20px;
    padding:0;
    text-align:center;
    max-width:95%;
    margin:0 auto;
}
#nav li {
    display:inline;
}
#nav a {
    /*display:inline-block;*/
    padding:15px;
    font-weight:bold;
    font-size:15px;
    margin:15px 0;
}
#nav-icon img {
    display:bolck;
}
.navimage {
    float:right;
    margin-top:-5px;
}