JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="main-menu" class="container">
    <li><a href="#">ONE</a></li>
    <li><a href="#">TWO</a>
    </li>
    <li><a href="#">THREE</a></li>
    <li><a href="#">FOUR</a></li>
</ul>

CSS

ul#main-menu,
    ul#main-menu li
    {
        list-style: none;
        padding: 0;
        overflow: visible;
        position: relative;
    }
    
    ul#main-menu
    {
        overflow: visible;
        height: 30px;
        white-space: normal;
    }
    
    ul#main-menu li
    {
        position: relative;
        float: left;
        margin: 0;
        overflow: visible;
        white-space: normal;
    }
    
    ul#main-menu li:after
    {
        content: "\00b7";
        width: 61px;
        float: right;
        text-align: center;
        border: rgba(0,0,0,0.25) 1px solid;
        white-space: normal;        
    }
    
    ul#main-menu li:last-child:after
    {
        content: "";
        background: #000;
        border: #000 1px solid;
        display: none;
        
    }