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: 5px 10px; border-right: 1px solid #ccc; text-decoration: none; }
.navBar a:hover { background: #e6e6e6;}

.navBar form { margin: 5px 40px 0 0;}