JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="top_panel">
		<div class="nav">
			навигация
		</div>
		<div class="search">
			поиск
		</div>
		<div class="login">
			форма входа
		</div>
	</div>
	<header>
		шапка сайта
	</header>
	<div class="container">
		<div class="left_sidebar">
			левая колонка
		</div>
		<div class="content">
			контентная часть
		</div>
	</div>
	<footer>
		подвал
	</footer>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
body{
	background:#dbdbdb;
}
.wrapper{
	
}
.top_panel{
	background:#161616;
	position:fixed;
	top:0;
	width:100%;
	color:#acacac;
	height:60px;
	z-index:999;
}
.nav{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width: calc(100% - 408px);
}
.search{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:200px;
}
.login{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:200px;
}
header{
	margin-top:70px;
	background:#fefefe;
	height:180px;
}
.container{
	min-height:1000px;
}
.left_sidebar{
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin-top:10px;
	width:200px;
	background:#fefefe;
	min-height:1000px;
}
.content{
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin-top:10px;
	width: calc(100% - 204px);
	background:#fefefe;
	min-height:1000px;
}
footer{
	margin-top:10px;
	height:80px;
	background:#fefefe;
}

@media (max-width:480px) {
.login{
	background:#161616;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	color:#acacac;
	height:60px;
	z-index:999;
}
}