JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="header">
			<a id="logo" href="#">1</a>
			<a id="message" href="#">2</a>
			<a id="notify" href="#">3</a>
			<a id="searchIcon" href="#">4</a>
			<div id="search">
				<input id="txtSearch" type="txt">
			</div>
			<a id="profile" href="#">Dad</a>
			<a id="option" href=""></a>
		</div>
	</body>

CSS

* {
	margin: 0;
	padding: 0;
}
html, body{
	width: 100%;
	height: 100%;
}
#header{
	display:flex;
	position: fixed;
	min-width: 100%;
	height: 10%;
	min-height: 10%;
	background-color: pink;
}
#logo:link, #logo:visited, #logo:hover, #logo:active{
	min-width: 20%;
	background-image:url(img/logo.png);
  	background-repeat:no-repeat;
	background-size: 70% 70%;
  	background-position:10% 50%;
}
#message:link, #message:visited, #message:active{
	display: block;
	min-width: 10%;
	background-image:url(img/messages.png);
  	background-repeat:no-repeat;
	background-size: 40% 50%;
  	background-position:50% 50%;
}
#message:hover{background-image:url(img/messages_hover.png); background-color: grey;}

#notify:link, #notify:visited, #notify:active{
	display: block;
	min-width: 10%;
	background-image:url(img/bell.png);
  	background-repeat:no-repeat;
	background-size: 40% 50%;
  	background-position:50% 50%;
}
#notify:hover{background-image:url(img/bell_hover.png); background-color: grey;}

#searchIcon:link, #searchIcon:visited, #searchIcon:active{
	display: block;
	min-width: 10%;
	background-image:url(img/search.png);
  	background-repeat:no-repeat;
	background-size: 40% 50%;
  	background-position:50% 50%;
}
#searchIcon:hover{background-image:url(img/search_hover.png); background-color: grey;}

#search{
	min-width: 25%;
}
#profile:link, #profile:visited, #profile:active{
	display: block;
	padding-left: 7%;
	padding-top: 1%;
	min-width: 12%;
	background-image:url(img/profilePic.jpg);
  	background-repeat:no-repeat;
	background-size: 25% 60%;
  	background-position:10% 50%;
}
#profile:hover{ background-color: grey;}
#option:link, #option:visited, #option:active{
	display: block;
	min-width: 3%;
	background-image:url(img/pen.png);
  	background-repeat:no-repeat;
	background-size: 40% 40%;
  	background-position:40% 40%;
}
#option:hover { background-image:url(img/pen_hover.png); background-color: grey;}
#txtSearch{
	display: block;
	width: 80%;
	height: 60%;
}