JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="main">
	<header id="header">
		<img id="logo" src="img/WebWorld.png">
		<div id="socialmedia"><!--
			--><a id="google" href=""><img src="img/google.png"></a><!--
			--><a id="facebook" href=""><img src="img/facebook.png"></a><!--
			--><a id="twitter" href=""><img src="img/twitter.png"></a><!--
			--><a id="in" href=""><img src="img/in.png"></a><!--
		--></div>
	</header>

	<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><!--d
			--><a href=""><p id="contact us">contact us</p></a><!--
		--></div>
		<input id="search" type="text">	
	</section>
	<hr></hr>

	<section id="slider">
		<img src="img/slider.png">
	</section>

	<section id="centralinformation">
		<p>Lorem Ipsum is simply dummy of the printing</p>
	</section>
	
</div>
	

<script>
</script>
</body>

CSS

@font-face {
font-family: "OpenSans";  
src: url("fonts/OpenSans-Regular.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal;
}

@font-face {
font-family: "OpenSansBold";  
src: url("fonts/OpenSans-Bold.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal;
}


* {
  margin: 0;
  padding: 0;
}

#main {
	max-width: 1366px;
	margin: 0 auto 0;
}

#header {
	width: 1366px;
	height: 60px;
	line-height: 60px;
	background-color: #252323;
}
#logo {
	display: inline-block;
	width:113px;
	height:23px;
	vertical-align: middle;
	margin-left: 205px;
}
#socialmedia {
	width: 194px;
	display: inline-block;
	height: 26px;
	line-height: 26px;
	vertical-align: middle;
	margin-left: 650px;
}

#google {
	display: inline-block;
	width: 23px;
	height: 23px;
	line-height: 23px;
	margin-left: 27px;
}
#facebook {
	display: inline-block;
	width: 13px;
	height: 26px;
	line-height: 26px;
	margin-left: 27px;
}
#twitter {
	display: inline-block;
	width: 25px;
	height: 21px;
	line-height: 21px;
	margin-left: 27px;
}
#in {
	display: inline-block;
	width: 25px;
	height: 24px;
	line-height: 24px;
	margin-left: 27px;
}
#navigation {
	width: 1366px;
	height: 80px;
	line-height: 80px;
	display: inline-block;
}

#menu{
	display: inline-block;
	height: 80px;
	margin-left: 193px;
}
#menu > a {
	display: inline-block;
	text-decoration: none;
	height: 80px;
	line-height: 80px;
	box-sizing: border-box;
}
#menu > a > p {
	display: inline-block;
	font: Regular 30px/20px OpenSans;
	line-height: 20px;
	color: #8b8b8b;
	vertical-align: middle;
	margin-left:13px;
	margin-right: 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;
}
#slider {
	width:...