JSFiddle - React, Tailwind, and code Playground

HTML

<!-- page -->
<div class="page">

	<!-- header -->
	<header class="main">
		<div class="header-bot">
			<div class="width_1150">
				<div class="fon_menu">
					<nav class="menu_shop">
						<span class="vertical-text">Магазин</span>
						<ul>
							<li class="gas"><a href="#">бензоинструмент</a></li>
							<li class="electro"><a href="#">электроинструмент</a></li>
						</ul>
					</nav>
					<nav class="menu_dop">
						<span class="vertical-text">Ремонт  и  обслуживание</span>
						<ul>
							<li><a href="#">Ремонт бензоинструмента</a>
								<div class="menu_dop_wrap">
									<div class="menu_dop_wrap-ul">
										<h4>Бензоинструмент</h4>
										<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>
										
											<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="menu_dop_wrap-ul">
										<h4>Электроинструмент</h4>
										<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>
							</li>
							<li><a href="#">Ремонт электроинструмента</a></li>
							<li><a href="#">Диагностика бензопилы</a></li>
							<li><a href="#">Ремонт триммера</a></li>
							<li><a href="#">Подготовка бензокосы к сезону</a></li>
							<li><a href="#">Обслуживание...

CSS

/* template.css */
* {
  margin: 0;
  padding: 0;
}
body, 
html {
	background: #A81514;
	height: 100%;
}

.page {
	/*margin: 0 auto;
	width: 1234px;*/
	font: 15px 'acrommedium', sans-serif;
	color: #1d2328;

	position: relative;
	min-height: 100%;
}
.width_1150{
	margin: 0 auto;
	padding: 0 50px;
	width: 1150px; 
	/*overflow: hidden;*/
}

a {
	color: #fff;
}

a:hover {
	text-decoration: none;
}

.clear {
	clear: both;
}

/***********************/
/*** --- Header --- ***/
/*********************/
header.main {
	position: relative;
	/*height: 245px;*/
	overflow: hidden;
}

header .header-bot {
	background:#a51019;
	height: 727px;
	background: url('../images/header_bot.png') no-repeat 0 0;
	background-size: cover;
	z-index: 100;
}



/*********************/
/*** --- Menu --- ***/
/*******************/
.fon_menu {
	position: relative;
	background: #f2c51b;
	float: left;
	z-index: 100;
	border-left: 1120px #f2c51b solid;
	margin:50px -100px 0 -100%;
	padding: 30px 20px 30px 30px;
	width: 300px;
}
	.fon_menu nav{
		position: relative;
	}
		.menu_shop ul {
			margin-left: 28px;
		}
		.menu_dop ul {
			margin-left: 45px;
		}
		.vertical-text {
			position: absolute;
			display: block;
			color: rgba(29, 35, 40, .4);
			text-transform: uppercase;
			font: 11px 'acrommedium', sans-serif;
			-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);
			letter-spacing:1px
		}
		.menu_shop .vertical-text {
			top: 22px;
			left:-22px;
		}
		.menu_dop .vertical-text {
			bottom: 89px;
			left:-83px;
		}
	.menu_shop {
		background: url('../images/line.png') no-repeat 50% 100%;
		padding-bottom: 1px;
		margin-bottom: 35px;
	}
		.gas {
			background: url('../images/icons_gas.png') no-repeat 0 40%;
		}
		.electro {
			background: url('../images/icons_electro.png') no-repeat 0 40%;
		}
		.menu_shop li{
			color: rgba(29, 35, 40, .7);
			font: 12px 'acrombold', sans-serif;
			text-transform: uppercase;
			margin-bottom: 28px;
			padding: 5px 0 5px 35px;
		}
		.menu_dop...