JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<div id="header">
	<a href="#"><span id="title">EXPLORE<br> SNOWBLOSSOM</span></a>
	<div id="search-div">
		<form id="search-form" class="button">
			<button id="search-submit" type="submit"><i class="fas fa-search"></i></button>
			<input id="search" name="search" type="text" autocomplete="off" required>
		</form>
	</div>
		
	<div id="navigation">
		<a href="#">
			<i class="fas fa-server fw"></i>
			<span>NODE</span>
		</a>
		<a href="#">
			<i class="fas fa-link fw"></i>
			<span>CHAIN</span>
		</a>
		<a href="#">
			<i class="fas fa-cube fw"></i>
			<span>BLOCKS</span>
		</a>
		<a href="#">
			<i class="fas fa-list fw"></i>
			<span>TRANSACTIONS</span>
		</a>
	</div>
</div>
<div id="content">
	CONTENT
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono|VT323|Varela|Unica+One');
* { font-family: "Unica One"; }
button, input { text-align: center; border: none; outline: none; }
button { display: flex; cursor: pointer; flex: 1; }
a, 
.button, 
.button:hover input[type="text"], 
.button button[type="submit"] { 
	display: flex; 
	text-decoration: none;
	background-color: white !important; 
	color: lightblue !important;
	transition: color 1s, background-color 1s; 
	/*border: 1px solid lightblue;*/
}
a:hover, 
.button:hover, 
.button input[type="text"],
.button:hover>button[type="submit"] {
	background-color: lightblue !important; 
	color: white !important;
	transition: color 1s, background-color 1s;
	/*border: 1px solid white; */
}


html { height: 100%; }
body {
  	display: flex;
  	align-items: stretch;
  	height: 100%;
  	width: 100%;
	margin: 0;
	background-color: white;
}
body>* { background-color: lightblue; }
#header { margin: 1em; padding: 1em; text-align: center; }
#content { margin: 1em; flex-grow: 1; }
#navigation { display: flex; }
#header a, #header .button { flex-basis: 2em; flex-grow: 1; align-items: center; padding: 1em; }
#header>*:not(:first-child)>*>*:first-child { display: flex; flex-grow: 0.25; align-items: center; justify-content: center; }
#header>*:not(:first-child)>*>*:nth-child(2) { display: flex; flex-grow: 1; align-items: center; justify-content: center; }
#header>*:not(:first-child){ margin-top: 1em; }
@media (orientation: landscape){
	body { flex-direction: row; }
	#content { margin-left: 0;}
	#navigation { flex-direction: column; }
	#navigation>a:not(:first-child){ margin-top: 1em; }
}
@media (orientation: portrait) {
  	body { flex-direction: column; }
	#title>br { display: none; }
	#content { margin-top: 0; }
	#navigation { flex-direction: row; }
	#navigation>a:not(:first-child){ margin-left: 1em; }
}
#header>*{
	display: flex;
	justify-content: center;
}
#title {
	font-size: 3em;
}
#header button, #navigation>a,...