JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="topmenu">
    <ul>
        <li><a href="">menu 1</a> |</li>
        <li><a href="">menu 2</a> |</li>
        <li><a href="">menu 3</a> |</li>
    <li><a href="">menu 4</a></li>
</ul>
    
    </div>
</div>

CSS

.wrapper {background:#ccc;
height: 500px
}
.topmenu {background:#aaa}
ul {list-style:none;height: 30px;width:200px;margin:0 auto}
li {float: left}