JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">
    <div id="nav">
        <ul>
            <li class="green"><a href="#">Home</a>

            </li>
            <li class="green"><a href="#">FAQs</a>

            </li>
            <li class="green"><a href="#">Contact us</a>

            </li>
            <li class="green"><a href="#">Terms of use</a>

            </li>
            <li class="green"><a href="#">Cookies</a>

            </li>
            <li class="green"><a href="#">Jobs</a>

            </li>
        </ul>
    </div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
}
#nav {
    float:left;
    width:234px;
    display:inline;
    text-align:right;
}
#footer ul {
    list-style:none;
    margin:0;
    padding:0;
    
}
#footer li {
    float:left;
    text-align:left;
    line-height:32px;
    text-indent:10px;
    width:49%;
}
#footer li.green a {
    color:#42454f;
    text-decoration:none;
    display:block;

}
#footer li.green a:hover, #footer ul li.green a:hover {
    color:#FFFFFF;
    text-decoration:none;
    background-color:#0db14b;
}