JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="#">Home Page</a></li>
    <li><a href="#">About Joomla</a></li>
    <li><a href="#">Online Store</a></li>
    <li><a href="#">Wrapper</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

CSS

body  { margin: 50px 0;}
        .nav { list-style: none;}
            .nav > li { 
                border-left: 1px solid #000;
                display: inline-block;
                line-height: 8px;
                
                
            }
            .nav > li:first-child { border-left: none;}    

            .nav > li > a {
                color: #900;
                font-size: 19px;
                text-decoration: none;
                padding: 10px 10px;
                position: relative;
                
                
            }
            
            *+ html .nav > li {
                display: inline;
                zoom:1;
            }