JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Navigation item 1</li>
    <li>Navigation item 2</li>
    <li>Navigation item 3</li>
    <li>Navigation item 4</li>
    <li>Navigation item 5</li>
</ul>

CSS

html, body{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
    width:95%;
    border:1px solid;
    overflow:hidden;
    padding:20px;
    background:linear-gradient(90deg, green 50%, grey 50%); 
}
li{
    float:left;
    width:20%;
    text-align:center;
    color:#fff;
}