JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta charset="utf-8" />
        <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
        <title>Сладфонд</title>
        <meta name="keywords" content="" />
        <meta name="description" content="Сайт кондитерского предприятия Сладфонд" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
        <!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
    <script language="JavaScript">
<!--
if (screen.width <= '1024') {
   document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">'); 
}
//-->
</script>
</head>

<body>

<div id="wrapper">

        <header id="header">
        <div id="knopka">       </div>
                <div id="prod">       </div>
                <div id="about">       </div>
                <div id="kont">       </div>
                <div id="verx">       </div>
                <div id="logo">      </div>
     
         </header><!-- #header-->

         <section id="middle">
         <div id="container">
                        <div id="content">
                <div id="mid">            </div>
                         <div id="pech">      </div>
                        </div><!-- #content-->
                </div><!-- #container-->
                <aside id="sideLeft">
                <div id="anim">           </div>
                <div id="inf">           </div>
                </aside>
<!-- #sideLeft -->

                <aside id="sideRight">
                <div id="animr">               </div>
                 <div id="teg">               </div>
                </aside>
        <!-- #sideRight -->
        </section>
<!-- #middle-->

</div><!-- #wrapper -->

        <footer id="footer">
                 
        </footer><!-- #footer -->

</body>
</html>

CSS

* {
        margin: 0;
        padding: 0;
}
html {
        height: 100%;
        width:100%;
}
header, nav, section, article, aside, footer {
        display: block;
}
body {
        font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
        height: 100%;
        width:100%;
        background-color:#000033;
}
a {
        color: blue;
        outline: none;
        text-decoration: underline;
}
a:hover {
        text-decoration: none;
}
p {
        margin: 0 0 18px
}
img {
        border: none;
}
input {
        vertical-align: middle;
}
#wrapper {
        width: 100%;
        min-width: 1000px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
}
/* Header
—————————————————————————--*/
#header {
        height: 130px;
}
/* Middle
—————————————————————————--*/
#middle {
        width: 100%;
        padding: 0 0 100px;
        height: 1%;
        }
#middle:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
}
#container {
        width: 100%;
        float: left;
        overflow: hidden;
}
#content {
        padding: 0 270px 0 270px;
}
/* Sidebar Left
—————————————————————————--*/
#sideLeft {
        width: 200px;
}
/* Sidebar Right
—————————————————————————--*/
#sideRight {
background-position:center;
        width: 200px;
                }
/* Footer
—————————————————————————--*/
#footer {
        margin: -100px auto 0;
        min-width: 1000px;
        height: 100px;
}
/*...