JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>menu item 1</li>
    <li>menu item 1</li>
    <li>menu item 1</li>
    <li>menu item 1</li>
</ul>

CSS

ul{
    margin:0;
    padding:0;
    display:block;
    background:blue;
}
ul:before, ul:after{
    display:table;
    clear:both;
    content:'';
}
ul li{
    display:block;
    float:left;   
    height:30px;
    line-height:30px;
    background:pink;
    padding:0 15px;
    width:25%;
    border-left:1px red solid;
    border-right:1px red solid;
    text-align:center;
    box-sizing:border-box;
}