JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <nav id='colorNav'>
<ul>
<li class='green'>
<a href='#' class='icon-home'></a>
<ul>
<li><a href='members/login'>Login</a></li>
</ul>
</li>
</ul>
</nav>
</div>

CSS

#colorNav { /* styles the container */
    display: inline-block;
    border-radius: 5px;
    margin: 10px auto;
    position: relative;
    z-index: 2;
}

#colorNav > ul{ 
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;    
    z-index: 2;

    
    background-color: #f0f;
}

#container
{
    width: 100%;
    text-align: center;
    background-color: #f00;
}