JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navBar">
    <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
    </ul>
    <form>
        <input type="text" />
        <input type="button" value="Search" />
    </form>
</div>

CSS

/* Required */
.navBar {background: #f2f2f2; width: 100%; overflow: hidden;}
.navBar ul { float: left; }
.navBar li { float: left; display: inline;}
.navBar a { display: block; float: left;}

.navBar form { float: right;}


/* Basic Styling */
.navBar { border: 1px solid #ccc; border-right: none; border-left: none;}
.navBar a { padding: 9px 10px; border-right: 1px solid #ccc; text-decoration: none; }
.navBar a:hover { background: #e6e6e6;}

.navBar form { 
    margin: 4px 40px 4px 0; 
    background: #e4e4e4; 
    padding: 3px; 
    border: 1px solid #b2b1b1; 
    border-radius: 2px;
}

.navBar form input[type=text]{
    border: 1px solid #acaaaa; 
    border-radius: 3px 0px 0px 3px;
    float: left;
    padding: 2px 10px
}
.navBar form input[type=button]{
    float: left;
    background: #80c038;
    color: #5d8f27;
    text-transform: uppercase;
    border: 1px solid #acaaaa;
    border-radius: 0 3px 3px 0;
    font-size: 12px;
    padding: 2px 10px 3px;

}