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">  
       <input type="text" name="query" value="Search" />  
       <input type="submit" name="submit" value="Search!" />  
    </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;*/
    float: left;
}     

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;  
    }