JSFiddle - React, Tailwind, and code Playground

HTML

<nav role="navigation">
                <ul class="menu">
                    <li><a href="#">Главная</a></li>
                    <li>
                        <div><a href="#">Фасадные<br/> конструкции</a>
                        <ul class="submenu">
                            <li><a href="#">Светопрозрачные<br/> фасады</a></li>
                            <li><a href="#">Зимние сады</a></li>
                            <li><a href="#">Вентилируемые<br/> фасады</a></li>
                        </ul></div>
                    </li>
                    <li><div>
                        <a href="#">Окна<br/> и двери</a>
                        <ul class="submenu">
                            <li><a href="#">Окна ПВХ,<br/> Алюминий,<br/> Дерево</a></li>
                            <li><a href="#">Двери,<br/> входные группы</a></li>
                            <li><a href="#">Офисные<br/> перегородки</a></li>
                        </ul></div>
                    </li>
                    <li><a href="#">Мойка окон<br/> и фасадов</a></li>
                    <li><a href="#">Цены</a></li>
                    <li><a href="#">Клиенты<br/> и отзывы</a></li>
                    <li><div><a href="#">Новости<br/> и акции</a>
                        <ul class="submenu">
                            <li><a href="#">Новости<br/> и акции</a></li>
                            <li><a href="#">Вопрос-ответ</a></li>
                        </ul></div>
                    </li>
                    <li><a href="#">Контакты</a></li>
                </ul>
        </nav>

CSS

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500&subset=cyrillic-ext,cyrillic);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.clear{
    clear:both;
}
.f35 {
font-size: 35px;}

.p20 {
padding-top: 20px;}
html {
	background: #0a0e17 url(../img/bg_1.png) 0 0 repeat-x;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
    color: #fff;
	-webkit-font-smoothing: antialiased;
    min-width: 1000px;
}
body {
	position: relative;
}
.top-pic {
    position: absolute;
    background: url(../img/top-pic-1.png) 50% 0  no-repeat;
	background-size:cover;
    width: 100%;
    height: 635px;
    left: 0;
    top: 0;
    z-index: -1;

}
header {
  position: relative;
}
.logo {
    position: absolute;
    top: 20px;
    left: 0;
}
.top_contacts {
    float: right;
    margin-top: 20px;
    width: 300px;
}
.top_contacts p, .top_contacts a {
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    text-decoration: none;
    text-align: right;
    text-transform: uppercase;}

.search {
    float: right;
}
.w1000 {
    width: 1000px;
    margin:auto;
}
nav {
    width: 100%;
    height: 66px;
    border-radius: 10px;
    background: #ccc url(../img/bg-menu.png) 0 0 no-repeat;
    -webkit-box-shadow:...