JSFiddle - React, Tailwind, and code Playground

by MightyPork

HTML

<nav class="main-nav">
    <ul class="main-nav-links">
        <li class="main-link"><a href="#">HOME</a></li>
        <li class="main-link"><a href="#">ABOUT US</a></li>
        <li class="main-link"><a href="#">ORDER</a></li>
        <li class="main-link"><a href="#">CONTACT</a></li>
    </ul>
</nav>

CSS

.main-nav {
    position: absolute;
    bottom: 0;
    margin-left: 290px;
}

.main-link {
    list-style: none;
    background-color: #1281f4;
    display: block; 
    float: left;        
}

.main-link > a {
    text-decoration: none;
    color: #073a4f;
    padding: 1em;
    display: inline-block;
}