JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="user_nav"><ul>
       <li><a href="#">Friends</a></li>
       <li><a href="#">Followers</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Interests</a></li>
</ul></nav>

CSS

#user_nav {
    height: 60px;
    border-bottom: 1px solid black;
    width: 100%;
}

#user_nav ul {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

#user_nav ul li {
    list-style: none;
    display: inline-block;    
}

#user_nav ul li a {
    vertical-align: middle;
    padding: 15px 25px 0 0;
    font-size: 18px;
    display: block;
}