JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="nav">
<ul>
    <li><img src="http://placeholder.it/50x50" alt="kranz" /><a href="index.php">COMPETE</a></li>
    <li><img src="http://placeholder.it/50x50" alt="thumb" /><a href="index.php">SCORE</a></li>
    <li><img src="http://placeholder.it/50x50" alt="bag" /><a href="index.php">SHOP</a></li>
    <li><img src="http://placeholder.it/50x50" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>
<img src="http://placeholder.it/100x100" id="logo" width="180px" />
</div>

CSS

#wrapper {
    
    width: 600px;
    overflow: auto;
}

#logo {
    position:relative;
    widhth: 100px;
    margin: auto;
    display:block;


}


#nav {
    background:#ffffff;
    width:100%;
    margin-top:-2em;

}


#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:20%;
    margin-left:2%;
    margin-right:2%;
    margin-top:5%;
    text-align:center;
}



#nav a {
    display:block;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;
}