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="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;
    margin-top:5px;
    margin-left:10px;    
    margin-bottom:5px;
       padding:0px;
}     

form#search-form input[type="text"] { 
       width:200px;
       height:18px;
       float:left; 
       border:1px solid Orange;
       border-right: none;
    }  
      
    form#search-form input[type="button"] {  
        width:50px;
        height:20px;
        float:left;
        border:none;
        cursor:pointer;
        background: Orange;
        color: #000000;
    }