JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Company Logo</h1>
<nav>
    <ul>
    <li>Home</li>
    <li>Very Long Link</li>
    <li>Blog</li>
    <li>About</li>
    <li>Also Long Link</li>
    <li>Email</li>
    </ul>
</nav>

CSS

nav {
    clear: both;
    background: pink;
}

    nav ul {
        padding: 20px 10px 0 30px;
        margin: 0;
        overflow: hidden;
        font-size: 16px;
    
    }

    nav li {
        font-variant: small-caps;
        text-decoration: underline;
        padding: 0 20px 30px 0;
        margin: 0; 
        width: auto;
    
}



h1 {
text-align: center; 
font-size: 40px;  
padding-top: 30px;    
}