JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
        <title id="title">Рязань Хлеб</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="css/reset.css" type="text/css" rel="stylesheet">
        <link href="css/styles.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.submenu').width($('#main_menu > li > a').innerWidth());
            });
        </script>        
</head>
<body>
        <div id="main">
                <div id="menu_stripe">
                        <a href =""><img src="img/logo.png"></a>
                        <ul id="main_menu">
                                <li>
                                        <a href="">О предприятии</a>
                                        <ul class="submenu">
                                                <li><a href="">История</a></li>
                                                <li><a href="">Технологии</a></li>
                                                <li><a href="">Достижения</a></li>
                                                <li><a href="">Продукция</a></li>    
                                        </ul>
                                </li>
                                <li><a href="">Для клиентов</a></li>
                                <li><a href="">Вакансии</a></li>
                                <li><a href="">Контакты</a></li>
                        </ul>
                        <!--
                        <ul id="submenu_about">
                                <li href=""><a href="">История</a></li>
                                <li href=""><a href="">Технологии</a></li>
                                <li href=""><a href="">Наши достижения</a></li>
                                <li href=""><a...

CSS

.clear{
    clear:both;
}

#main{
    margin:0 auto;
    width:1200px;
}


#top_stripe{
    position: fixed;
    width: 100%;
    height: 35px;
    background-color: black;
}


#menu_stripe{
    width: 100%;
    height: 100px;
    background-color: #eef0f2;    
}
#menu_stripe a img{
    //display: inline;
    float: left;
    margin-top: 10px;
    margin-left: 75px;
}

#main_menu{
    z-index: 1;
    //display: inline-block;
    float: left;
    margin-top: 30px;
    //margin-right: 115px;
    margin-left: 80px;
}
#main_menu > li {
    //display: inline;
    float: left;
}
#main_menu li a{
    padding-left: 25px;
    padding-right: 25px;
    color: black;
    font: 21px "Franklin Gothic Book";
}
#main_menu li:hover  a  + .submenu{
    display: block;
    top: -1px;
    background-color: white;
    //border: 1px dotted red;
}
.submenu {
    z-index: 0;
    padding-top: 85px;
    display: none;
    position: absolute;
}
.submenu li{
    margin-bottom: 20px;
}
.submenu li a{
    font: 10px "Myriad Pro";
    color: #417f81;
}

.submenu li a:hover{
    text-decoration: none;
}
.submenu > li  + a{
    color: black;
}

#thin_gray_stripe{
    width: 100%;
    height: 3px;
    background-color: #a1aeb7;
}


#white_stripe{
    width: 100%;
    height: 28px;
}
#white_stripe p{
    margin-top: 10px;
    margin-left: 137px;
    font: 13px "Myriad Pro";
    color: #7e8b99;
}


#header{
    width: 100%;
    height: 290px;
    background: url(../img/header.jpg) bottom;
}        
#header div {
    float: left;
    margin-top: 10px;
    margin-left: 50px;
    background-color: white;
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}
#header div p{    
    padding-left: 25px;
    padding-right: 25px;     
    height: 60px;
    line-height: 60px;
    font: 59px "Myriad Pro";
}
#header img{
    float: right;
    margin-top: 10px;
    margin-right: 63px;
}


#content{
    width: 100%;
    //height: 200px;
    padding-bottom: 40px;
}
#content p{
    //float:...