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="Type a search entry..." onclick="this.value='';" />  
       <input type="button" name="submit" value="" />  
    </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;
    margin-top:5px;
    margin-left:10px;    
    margin-bottom:5px;
       padding:0px;
}     
 

form#search-form input[type="text"] {  
        background: url(searchbartest.png) no-repeat;  
        border:1px solid #000000;      
        width:200px;
       /* margin:0;*/
       font-size:85%; 
       float:left;
     
       height:20px;
      
    }  
      
    form#search-form input[type="button"] {  
        background: url(searchbutton.png) no-repeat;
        width:50px;
        float:left;
        cursor:pointer;
        border:none;        
        height:20px;
    }