JSFiddle - React, Tailwind, and code Playground

HTML

<div id="default_menu">
    <ul>
    	<li><a href="#nogo" title="HOME">HOME</a></li>
    	<li class="main_menu_seperator">|</li>
    	<li><a href="#nogo" title="HOW IT WORKS">HOW IT WORKS</a></li>
    	<li class="main_menu_seperator">|</li>
    	<li><a href="#nogo" title="PARTNERS">PARTNERS</a></li>
    	<li class="main_menu_seperator">|</li>
    	<li><a href="#nogo" title="BLOG">BLOG</a></li>
    	<li class="main_menu_seperator">|</li>
    	<li><a href="#nogo" title="CONTACT US">CONTACT US</a></li>
    </ul>
</div>

CSS

#default_menu
    {
    	font-weight: normal;
    }
    #default_menu
    {
    	font-size: 16px;
    }
    #default_menu ul
    {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    }
    #default_menu li
    {
    	display: inline;
    }
    .main_menu_seperator
    {
    	padding: 0px 10px 0px 10px;
    }