JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
<div id="bottomnav">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul
    </div>
</div>

CSS

#wrap{
    width:600px;    
    height:400px;
    background:#000;   
    position:relative;        
}

#bottomnav{
    width:600px;
    height:50px;
    background:#F00;
    position:absolute;
    bottom:0px;

}

#bottomnav ul{
    list-style:none;
    display:inline-block;
    width:100%;
}

#bottomnav ul li{
    width:25%;
    float:left;
    text-align:center;
}