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:4px;
    margin-left:20px;    
      margin-bottom:0;
       padding-bottom:0;
}     

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;
       padding-right:50px;
      
    }  
      
    form#search-form input[type="button"] {  
        background: url(searchbutton.png) no-repeat;
        width:50px;
        float:left;
        cursor:pointer;
            margin-left:-50px;
        border:none;
        
        height:20px;
    }