JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menubar">
          <ul>
            <li><a href=# >Home</a></li>
            <li><a href=# >About Us</a></li>
            <li><a href=# >Online Courses</a></li>
            <li><a href=# >Registration</a></li>
            <li><a href=# >Faculty</a></li>
            <li><a href=# >Calendar</a></li>
            <li><a href=# >Store</a></li>
            <li><a href=# >Testimonials</a></li>
            <li><a href=# >Online Lectures</a></li>
            <li><a href=# >Contact Us</a></li>
            <li><a href=# >Forum</a></li>
            <li><input class="searchbox" trype="text" value="Search" onfocus="this.value='';" onblur="if(this.value=='') this.value='Search';"/> </li>
          </ul>
        <div style="clear:both;"></div>
        </div>

CSS

#menubar{
height:auto;
background:#ebebec;
margin-top:0px;
padding-top:0px;
padding-left:0px;
}
ul{
list-style-type:none;
padding:0px;
margin:0px;
}
#menubar ul li{
text-decoration:none;
color:#005da4;
text-align:center;
margin:none;
width:auto;
padding-left:0;
padding-right:0;
float:left;
}
#menubar ul li:hover a{
background:#acce39;
}

#menubar ul li a{
text-decoration:none;
color:#005da4;
display:inline-block;
width:100%;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin-left:0;
margin-right:0;
}
.searchbox
{
  -moz-border-radius: 15px;
 border-radius: 15px;
    border:solid 1px black;
    padding:5px;
	margin:5px;
	margin-left:15px;
	align:left;
}