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; line-height: 30px; text-align: center; }
li {display:inline-block;}

li:before { content: '| '; }
li:first-child:before { content: ''; }

*+html li { display: inline; zoom: 1; }
*+html li + li { padding-left: .25em; margin-left: .25em; border-left: 1px solid; }