JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="search1.css"/>
</head>
<body>
<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 action="#search" method="post" id="search-form">  
                    <p>  
                        <input type="text" name="query" value="Search" />  
                        <input type="submit" name="submit" value="Search!" />  
                    </p>  
    </form>  
    <ul class ="secondlinks">
        <li><a href="#">Login</a></li>
        <li><a href="#">Basket</a></li>
    </ul>
</div>
</body>
</html>

CSS

/* Required */
.navBar {background: #f2f2f2; width: 100%; overflow: hidden;}
.navBar ul { list-style:none; margin:0; padding:0; float: left; }
.navBar li { padding:0; margin:0; float: left; display: inline;}
.navBar a { display: block; float: left;}




/* 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 ul.secondlinks{ float: right;}

form#search-form {  
    width: 230px;
    display:inline;
    padding:0;
    margin:0;
    float:none;
}     

form#search-form input[type="text"] {  
        background: url(search-field.png) no-repeat;  
        border:none;  
        height:25px;  
        padding: 5px 0px 0px 35px;  
        width:200px; 
        margin:0;
 
    }  
      
    form#search-form input[type="submit"] {  
        display: none;  
    }