JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header class="header">
		<div class="container">
			<div class="left-menu">
				<ul class="sf-menu">
					<li><a href="#">Компания <br/>«Очаг»<span class="menu-icon menu-ochag"></span><span class="menu-bottom"></span></a></li>
					<li>
						<a href="#">Двери<span class="menu-icon menu-door"></span><span class="menu-bottom"></span></a>
					</li>
					<li><a href="#">Дилерам<span class="menu-icon menu-dealer"></span><span class="menu-bottom"></span></a></li>
				</ul>
			</div>
			<a href="#">
				<div class="logo-block">
					<div class="logo"></div>
					<span class="logo-bottom"></span>
				</div>
			</a>
			<div class="right-menu">
				<ul class="sf-menu">
					<li><a href="#">Наши <br/>работы<span class="menu-icon menu-works"></span><span class="menu-bottom"></span></a></li>
					<li><a href="#">Вопрос-<br/>ответ<span class="menu-icon menu-question"></span><span class="menu-bottom"></span></a></li>
					<li><a href="#">Контакты<span class="menu-icon menu-contact"></span><span class="menu-bottom"></span></a></li>
				</ul>
			</div>
		</div>
	</header>
	

</body>

CSS

* {
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #444443;
}



a:hover {
	color: #ff7006;
}

.container {
	width: 1020px;
	margin: 0 auto;
}

.container:after, .clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/**********************************************************************************/
/*HEADER*/
/**********************************************************************************/

.header {
	background: #444444;
	background: -moz-linear-gradient(top,  #444444 0%, #333333 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#333333));
	background: -webkit-linear-gradient(top,  #444444 0%,#333333 100%);
	background: -o-linear-gradient(top,  #444444 0%,#333333 100%);
	background: -ms-linear-gradient(top,  #444444 0%,#333333 100%);
	background: linear-gradient(to bottom,  #444444 0%,#333333 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#333333',GradientType=0 );
	margin-top: 20px;
}

.logo {
	width: 93px;
	height: 86px;
	margin: 3px 25px;
}

.logo-block {
	background: #aaaaaa;
	background: -moz-linear-gradient(top,  #aaaaaa 0%, #666666 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#666666));
	background: -webkit-linear-gradient(top,  #aaaaaa 0%,#666666 100%);
	background: -o-linear-gradient(top,  #aaaaaa 0%,#666666 100%);
	background: -ms-linear-gradient(top,  #aaaaaa 0%,#666666 100%);
	background: linear-gradient(to bottom,  #aaaaaa 0%,#666666 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#666666',GradientType=0 );
	border: 1px solid #666;
	width: 142px;
	float: left;
}

.logo-bottom {
	display: block;
	height: 8px;
	width: 100%;
	background: #333333;
	background: -moz-linear-gradient(top,  #333333 0%, #222222...

JavaScript

jQuery(document).ready(function(){
			jQuery('ul.sf-menu').superfish();
		})