JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="Head">	
		<div id="Nav">  <!-- Создаем функцию в index.php  -->
			<div class="button_menu lh-50">
				<a href=""> О НАС </a>
				<div class="drop_menu">
					<div class="title">
						<div class="title-title">
							<h2> О НАС </h2>
						</div>
						<div class="title-next_drop_menu">

						</div>
						<div class="title-description">

						</div>
					</div>
					<div class="drop_menu_select">
						<a href=""> Календарь событий </a>
						<a href=""> Сотрудничество </a>
						<a href=""> Международная деятельность </a>
						<a href="" class="drop"> Лицензии и сертификаты </a>
							<div class="next_drop_menu_select">
								<a href=""> Лицензии </a>
								<a href=""> Патенты </a>
								<a href=""> Дипломы </a>
							</div>
					
						<a href="" class="drop"> Закупочная деятельность </a>
							<div class="next_drop_menu_select">
								<a href=""> Закупки </a>
								<a href=""> Информация о закупках </a>
								<a href=""> Нормативные документы </a>
							</div>
						<a href=""> Раскрытие информации </a>
						<a href=""> Вакансии </a>
						<a href=""> Наши партнеры </a>
					</div>
					<div class="next_drop_menu">
					</div>
					<div class="description">
						<p></p>
					</div>
				</div>
			</div>
			<div class="button_menu lh-50">
				<a href=""> НОВОСТИ </a>
			</div>
			<div class="button_menu lh-50">
				<a href=""> ДОКУМЕНТЫ </a>
			</div>
			<div class="button_menu lh-50">
				<a href=""> УСЛУГИ </a>
				<div class="drop_menu">
					<div class="title">
						<div class="title-title">
							<h2> УСЛУГИ </h2>
						</div>
						<div class="title-next_drop_menu">

						</div>
						<div class="title-description">

						</div>
					</div>
					<div class="drop_menu_select">
						<a href=""> Испытательно-технический центр коллективного пользования </a>
						<a href=""> Испытательная лаборатория «Интернавигация-ТЕСТ» </a>
						<a href=""> Опытное производство </a>
						<a href=""> Стандартизация </a>
						<a...

CSS

*	{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face {
    font-family: firasans; /* Имя шрифта */
    src: url(../font/firasans.ttf); /* Путь к файлу со шрифтом */
   }

.lh-50 {
	line-height: 50px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
   content: "";
   display: table;
}
.clearfix:after {
   clear: both;
}

/* для IE6-7 */
.clearfix {
   zoom: 1;
}



body {
	width: 1280px;
	margin: 0 auto;
}
#Head {
	width: 1280px;
	margin: 0 auto;
	height: 400px;
	background-image: url(../img/bg-logo.jpg);
	border-radius: 0 0 5px 5px;
	}
#Nav {
	position: relative;
	width: 1200px;
	height: 50px;
	margin: 0 auto;
	}
#Logo {
	margin: 0 auto;
	width: 1280px;
	height: 350px;
}
.switch_left {
	position: absolute;
	left: 0;
	top: 125px;
	width: 40px;
	height: 75px;
	background-color: #232323;
	background-image: url(../img/switch-left.png);
	background-repeat: no-repeat;
	background-position: left;
}
.switch_left a {
	display: none;
	width: 100%;
	height:100%;
	text-decoration: none;
	color: #fff;
	line-height: 75px;
	text-align: center;
	white-space: pre-wrap;
}
.switch_left:hover{
	width: 150px;
	height: 75px;
	background-color: #c2c2c2;
}
.switch_left:hover a{
	display: block;
}
.switch_right {
	position: absolute;
	right: 0;
	top: 125px;
	width: 40px;
	height: 75px;
	background-color: #232323;
	background-image: url(../img/switch-right.png);
	background-repeat: no-repeat;
	background-position: right;
}
.switch_right a {
	display: none;
	width: 100%;
	height:100%;
	text-decoration: none;
	color: #fff;
	line-height: 75px;
	text-align: center;
	white-space: pre-wrap;
}
.switch_right:hover{
	width: 150px;
	height: 75px;
	background-color: #c2c2c2;
}
.switch_right:hover a{
	display: block;
}
.button_menu {
	width: 10%;
	height: 100%;
	list-style: none;
	float:left;
	border-right: 1px solid #c2c2c2;
}
.button_menu:last-child {
	border-right: none;
}
.button_menu a{
	width:...