JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<div id="header-content">
			<div id="shortcut-bar">
				<ul>
					<li>Home</li>
					<li>Contact us</li>
					<li>About</li>
					<li>
						<form>
							<span id="search-text"><input type="text" placeholder="Enter Text Here"></span>
							<span id="search-submit"><input type="submit" value="Search"></span>
						</form>
					</li>
				</ul>
			</div> <!-- shortcut-bar end -->
			<img src="images/header/mainlogo.png" alt="smashing-amazing-css-logo">
			<h1>Smashing Amazing CSS</h1>
		</div>		
	</header>

CSS

* {margin: 0; padding: 0;}

body {
	font: normal 13px/16px "open sans", sans-serif;
}

header {
	height: 190px;
	width: 100%;
	background: rgba(0,0,0,.65);
	/*url('../images/header/headerbg.png') left top no-repeat*/
	min-width: 1000px;
}

#header-content {
	margin: 0 auto;
	color: white;
	width: 1000px;
}

#shortcut-bar {overflow: visible;}

#shortcut-bar ul {
	list-style: none;
	float: right;
}

#shortcut-bar li {
	float: left;
	font-weight: bold;
	padding: 15px 10px;
	font-size: 15px;
	/* vvvvvvvvvvvvvvvvvvvvv here vvvvvvvvvvvvvvvvvvvvv */
	background: transparent; 
	-webkit-transition: background 1s ease-in-out;
}

#shortcut-bar li:nth-of-type(1),
#shortcut-bar li:nth-of-type(2),
#shortcut-bar li:nth-of-type(3) {
	padding: 20px 10px;
}

#shortcut-bar li:hover {
	/* vvvvvvvvvvvvvvvvvvvvv here vvvvvvvvvvvvvvvvvvvvv */
	background: -webkit-linear-gradient(top, rgb(58,210,255) 0%, rgb(0,180,232) 100%);
	cursor: pointer;
}

#shortcut-bar li:nth-of-type(4):hover { background: none; }


#shortcut-bar li input[type=text] {
	background: -webkit-linear-gradient(bottom, #E5E5E5 0%, white 27px);
	-webkit-box-sizing: border-box;
	outline: 0;
	height: 27px; width: 200px;
	padding-left: 25px;
	-webkit-border-radius: 3px;
	border: 0px solid transparent;
	color: gray;
}

#shortcut-bar li input[type=text]:focus {
	color: black; border: 1px solid #87C5ED;
	box-shadow: 0 0 5px #87C5ED;
}

#shortcut-bar li input[type=submit] {
	margin: 0px 0 0 8px;
	padding: 4px;
	width: 80px;
	border: none;
	height: 27px;
	-webkit-border-radius: 3px;
	background: -webkit-linear-gradient(top, #BCDEF5 0%, #1F8BD3 100%);
	cursor: pointer;
}

#shortcut-bar li input[type=submit]:active {
	background: -webkit-linear-gradient(top, #2091DB 0%, #69B6E9 100%);
}

#header-content img {
	float: left;
	width: 245px; height: 151px;
	padding-top: 20px;
}

#header-content h1 {
	width: 460px;
	font-family: economica, helvetica, sans-serif;
	padding-top: 15px;
	line-height: 75px;
	height: 70px;
	float:...