JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="wrapper">
		<div class="header">
			<div class="logo">
				<a href="/"><img src="img/logo.png"></a>
			</div>
			<div class="contacts-head">
				<p>bla bla</p>
				<p>Схема проезда</p>
				<p>(095) 11111555-77-55</p>
			</div>
			<div class="slogan">
				<p>Firma</p>
				<span>Slogan</span>
			</div>
		</div>
		<div class="conteiner">
			<div class="sidebar">
				<ul>
					<li><a href="#">Главная</a></li>
					<li><a href="#">О нас</a></li>
					<li><a href="#">Продукция</a></li>
					<li><a href="#">Услуги</a></li>
					<li><a href="#">Производство</a></li>
					<li><a href="#">Контакты</a></li>
				</ul>
			</div>
			<div class="content">das</div>
		</div>

		<div class="footer">
		<p>2006-2017 &#169;</p>
		</div>
	</div>
</body>

CSS

*{
	margin: 0;
	padding: 0;
}

html{height:100vh;}

#wrapper{
	height:100vh;
}

body{
	background: url(../img/background-img-main.jpg) no-repeat;
	background-size: cover;
	font: 12px Verdana;
	box-shadow:0 0 0 600px rgba(0, 0, 0, 0.5) inset;
	height:100vh;
}

.clear{
	clear:both;
}

.header{
	background: rgba(0,0,0,0.5);
	overflow: hidden;
	padding-bottom: 10px;
}

.logo{
	height:100%;
	padding: 10px 0 0 62px;
	float: left;
	//overflow:hidden;
}

.slogan{
	margin: auto;
	color: #fff;
	width: 270px;
	text-align:center;
}

.slogan p{
	font-size: 56px;
}

.slogan span{
	font-size: 19px;
}

.contacts-head{
	float: right;
	padding-top:40px;
	margin-right: 40px;
	height:auto;
}

.contacts-head p{
	float: left;
	color: #fff;
	font-size: 11px;
	padding-right: 20px;
}

.conteiner{
	height: auto;
	position:relative;
}

.content{
	background: #fff;
	width:80%;
	position:absolute;
	right:0;
}

.sidebar{
	font-size: 15px;
	width: 20%;
	position: absolute;
	left:0;
	display: table;
	height: 400px;
}

.sidebar ul{
	margin: auto 55px;
	list-style: none;
	border-left: 1px solid #a9aaaa;
	padding: 10px 15px 10px 15px;
	//height:auto;
	padding: auto;
}

.sidebar ul li{
	margin-bottom: 30px;
}

.sidebar ul li:last-child{
	margin-bottom: 0;
}

.sidebar ul li a{
	text-decoration: none;
	color: #a9aaaa;
	cursor:pointer;
	
}

.sidebar ul li:hover{
	list-style: url(../img/li-img.png);
}

.sidebar ul li a:hover{
	color: #fff;
}

.footer{
	height: 40px;
	bottom: 0px;
	background: #111a1d;
	text-align: center;
	color: #fff;
	position: absolute;
	width: 100%;

}

.footer p{
	padding-top: 12px;
}