JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
        <ul>
            <!--<li><a href="index.html" class="logo"><img src="../img/PowerUpLogo.gif" class="logo"></a></li>-->
            <li><a href="home.html">Brand</a></li>
            <li><a href="stories.html">Link</a></li>
            <li><a href="community.html">Link</a></li>
            <li><a href="contact.html">Link</a></li>
            <div class="right">
            <span class="padding"><a href="log_in.html" class="button button-log-in">Log In</a></span>
            <span class="padding"><a href="sign_up.html" class="button button-sign-up">Sign Up</a></span>
            </div>
        </ul>
    </div>

CSS

/*****NAVBAR****/
#navbar ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#navbar ul li {
    display: inline-block;
    padding: 1.5% 2%;
}

#navbar ul li a {
    color: #4F8E64;
    font-size: 0.9em;
    font-weight: 500;
}

#navbar ul li a:hover {
    text-decoration: underline;
}

/**********************
******NAV BUTTONS******
**********************/

    .button {
    font-size: 0.9em;
}

.button-log-in {
    color: #6EC78B;
    background-color: #FFF;
    border: 1px solid #6EC78B;
}

.button-log-in:hover {
    color: #5CE68A;
    border: 1px solid #5CE68A;
}

.button-sign-up {
    color: #FFF;
    background-color: #6EC78B;
}

.button-sign-up:hover {
    background-color: #5CE68A;
}

.right {
    float: right;
}