JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
                                <ul>
                                        <li>Home</li>
                                        <li class="line"></li>
                                        <li>Block</li>
                                        <li class="line"></li>
                                        <li>Shortcode</li>
                                        <li class="line"></li>
                                        <li>Gallery</li>
                                        <li class="line"></li>
                                        <li>Contact</li>
                                        <li class="line"></li>
                                        <li>Dropdown</li>
                                </ul>
                        </div>

CSS

.menu{
        width:100%;
        height:100px;
        margin-top:100px;
        /* background-image:url('menu.png'); */
        background:green;
        background-size:100%;
        background-repeat:no-repeat;
        padding:0px;
        padding-top:0px;
        line-height: 100px;
}
li{
        display:inline-block;
        font-family:Amaranth;
        font-size:14px;
        padding-left:40px;
        padding-right:40px;
        /* padding-bottom:40px;
        padding-top:20px; */
        height:50px;
        line-height: 50px;
               
}
.line{
        display:inline-block;
        margin:0px;
        padding:5px;
        padding-top:10px;
        padding-bottom:0px;
        background-image:url('line.png');
        background-repeat:repeat-y;
        height:25px;
}
li:not(.line){
        background:red;
        padding-top:0px;
        padding-bottom:0px;
        margin:0px;
}