JSFiddle - React, Tailwind, and code Playground

by Yurik Elmanov

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Template HTML/CSS</title>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	
</head>

<body>
	<div id="Head">	
		<div id="Logo">
			
		</div>
		<div id="nav">
			<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">
						<span><a href=""> Календарь событий </a></span>
						<span><a href=""> Сотрудничество </a></span>
						<span><a href=""> Международная деятельность </a></span>
						<span><a href=""> Лицензии и сертификаты </a></span>
						<span><a href=""> Закупочная деятельность </a></span>
						<span><a href=""> Раскрытие информации </a></span>
						<span><a href=""> Вакансии </a></span>
						<span><a href=""> Наши партнеры </a></span>
					</div>
					<div class="next_drop_menu">
					</div>
					<div class="description">
						<span>
							<p></p>
						</span>
					</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">
						<span><a href=""> Испытательно-технический центр коллективного пользования </a></span>
						<span><a href=""> Испытательная лаборатория «Интернавигация-ТЕСТ» </a></span>
						<span><a href=""> Опытное производство...

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(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;
	}
#nav {
	width: 1200px;
	height: 50px;
	margin: 0 auto;
	}
.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: 100%;
	height: 100%;
	text-decoration: none;
	font-size: 14px;
	font-family: firasans;
	color: #fff;
	background-color: #232323;
	display: block;
	text-align: center;
}
.button_menu a:hover{
	background-color: rgba(118,118,118,0.7);
}
.drop_menu{
	display: none;
	position: absolute;
	top:50px;
	width: 1200px;
	height: 350px;
	left:40px;
	line-height: normal;
	background-color: rgba(118,118,118,0.7);
	padding-bottom: 20px;
}
.button_menu:hover .drop_menu{
	display: block;
}
.title {
	width:1200px;
	height: 50px;
}
.title-title{
	width: 310px;
	float:left;
	margin: 10px 0;
}
.title-title h2 {
	width: 100%;
	text-align: center;
	color: #fff;
}
.title-next_drop_menu {
	width: 540px;
	float: left;
	margin: 10px 0;
}
.title-description {
	width: 350px;
	float:left;
	margin: 10px 0;
}
.drop_menu_select {
	width: 310px;
	float:left;
}
.drop_menu_select a {
	background-color:  rgba(0,0,0,0);
}
.drop_menu_select a:hover {
	background-color: #232323;
}
.next_drop_menu {
	float: left;
	width: 540px;
	height: 240px;
	border-right: 1px solid #c2c2c2;
	border-left: 1px solid #c2c2c2;
}
.description {
	float: left;
	width: 350px;
	height: 240px;
}