JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navrow">
    <img style="float: left;" src="questerslogoresized.png" />
    <ul>
        <li>Register</li>&nbsp&nbsp&nbsp
        <li>About</li>&nbsp&nbsp&nbsp
        <li>Reviews</li>&nbsp&nbsp&nbsp
        <form id='login' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
            <div>
                <div class="form-controls">
                    <input type='hidden' name='submitted' id='submitted' value='1' />
                    <input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='' maxlength="20" />
                    <label for="username">Your username goes here</label> <span id='login_username_errorloc' class='error'></span>

                </div>
                <div class="form-controls">
                    <input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
<span id='login_password_errorloc' class='error'></span>

                </div>
                <p style="clear:both"></p>
            </div>
            <input type='submit' style='position: absolute; top: 18px; right: 45px;' name='Submit' value='Submit' />
            <!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>--></div>
</form>
</ul>

CSS

#navrow {
    background: #ffc966;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 75px;
    box-shadow: 0px 0px 15px 0px #000;
}
.formlogin {
    border-radius: 12px 12px 12px 12px;
    height: 24px;
    /*width: 200px;*/
    padding: 5px;
    border-style: solid;
    border-color: #0093cc;
    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
    -ms-transition: border-color 1s ease;
    transition: border-color 1s ease;
    display: block;
    font-size: 16px;
    width: 12.5em;
}
.form-controls {
    float:left;
}