JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="nav">
    <ul>
        <li><a href="">TEST</a></li>
        <li><a href="">TEST</a></li>
        <li><a href="">TEST</a></li>
        <li><a href="">TEST</a></li>
    </ul>
</div>

CSS

#nav {
    position: relative;
    float: right;
    left: -50%;
    text-align: left;
}

#nav ul {
    list-style-type: none;
    position: relative;
    left: 50%;
}

#nav ul li {
    float: left;
    margin-right: 10px;
    position: relative;
}

#nav ul li a {
    float:left;
    text-align:center;
    white-space:nowrap;
    background-color: #eee;
    padding: 20px 30px;
}