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 rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <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 src="js/jquery.nivo.slider.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery.nivo.zoom.js"></script>        
        <script type="text/javascript">
            $(function(){
                $('.submenu').width($('#main_menu > li > a').innerWidth());
                $(window).load(function() {
                    $('#slider').nivoSlider();
                });
            });

            $(window).load(function() {
                $('body').nivoZoom();
            });
        </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="">Для...

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;
}
#menu_stripe a img{
    //display: inline;
    float: left;
    margin-top: 10px;
    margin-left: 75px;
}

#main_menu{
    position: relative;
    z-index: 1;
    float: left;
    margin-top: 30px;
    margin-left: 80px;
}
#main_menu > li {
    float: left;
}
#main_menu li a{
    padding-left: 25px;
    padding-right: 25px;
    color: black;
    font: 21px "Franklin Gothic Book";
}

.submenu {
    position: absolute;
    z-index: 0;
    padding-top: 85px;
    display: none;
    top: -54px;
    background-color: white;
    -moz-box-shadow: 0 0 15px rgba(207,207,207,0.8); /* Для Firefox */
    -webkit-box-shadow: 0 0 15px rgba(207,207,207,0.8); /* Для Safari и Chrome */
    box-shadow: 0 0 15px rgba(207,207,207,0.8); /* Параметры тени */
    filter: progid:DXImageTransform.Microsoft.dropshadow(offX=0, offY=0, color=#cfcfcf);
}
.submenu li{
    margin-bottom: 20px;
}
.submenu li a{
    font: 10px "Myriad Pro";
    color: #417f81;
}
#main_menu li:hover  a  + .submenu{
    display: block;
}

.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;
}        
#semi_transp_rect {
    float: left;
    margin-top: 10px;
    margin-left: 50px;
}
#semi_transp_rect div{
    width: 280px;
    height: 60px;
    background-color: white;
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);

}
#semi_transp_rect p{
    //padding-left: 25px;
    //padding-right:...