JSFiddle - React, Tailwind, and code Playground

HTML

<section id="navigation">
		<div id="menu"><!--
			--><a href=""><p id="home">home</p></a><!--
			--><a href=""><p id="aboutus">about us</p></a><!--
			--><a href=""><p id="service">service</p></a><!--
			--><a href=""><p id="pages">pages</p></a><!--
			--><a href=""><p id="blog">blog</p></a><!--
			--><a href=""><p id="contact us">contact us</p></a><!--
		--></div>
		<input id="search" type="text">	
	</section>

CSS

#navigation {
	width: 1366px;
	height: 80px;
	line-height: 80px;
	display: inline-block;
}

#menu{
	display: inline-block;
	height: 80px;
	margin-left: 193px;
}
#menu > a {
  vertical-align:top;
	display: inline-block;
	text-decoration: none;
	height: 80px;
	line-height: 80px;
  /* Что бы блок не скакал при изменении размера бордера по ховеру */
  box-sizing: border-box;
}
#menu > a > p {
	display: inline-block;
  /* Обязательно перенести font-family в конец */ 
	font: 30px/20px regular OpenSans;
	line-height: 20px;
	color: #8b8b8b;
	vertical-align: middle;
  /* Убираем лишний отступ сверху и снизу */
  margin: 0 13px;
	text-transform: uppercase;
}

#menu > a:hover {
	border-bottom: 2px solid #00bac6;
}


#menu > a:hover > p {
	color: #00bac6;
}

#search {
	display: inline-block;
	margin-left: 210px;
	width: 190px;
	height: 36px;
	vertical-align: center;
	background: url('img/search.png') no-repeat center;
	font-size: 30px;
}

#search:focus {
	background: white;
	border-color: red;
}

@media screen and (max-width: 480px) {

	#navigation {
		width: auto;
		text-align: center;
		height: 700px;
    /* В мобильных значение должно быть по размеру блока */ 
    line-height: 40px;
	}

	#menu {
		width:auto;
		margin-left:0px;
		height: 486px;
	}

	#menu > a {
		width:100%;
		height: 40px;
		line-height: 40px;
		margin: 0px;
		padding: 0px;
		text-align: center;
		border-bottom: 1px solid #8b8b8b;
	}
	#search {
		background: white;
		width:90%;
		margin: 0px;
		height: 20px; 
	}


}