JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<!-- PAGE #Begin /-->
<div id="container">

        <!-- HEADER #Begin /-->
        <div id="header">
        111111111
        </div>
        <!-- HEADER #End /-->

        <!-- CONTENT #Begin /-->
        <div id="content">
        <div id="middle">
                <ul class="persi">
                        <li class="s-1"><h3><a href="">Каталог</a></h3></li>
                        <li class="s-2"><h3><a href="">Новинки и новости</a></h3></li>
                        <li class="s-3"><h3><a href="">Контакты</a></h3></li>
                        <li class="s-4"><h3><a href="">Отзывы</a></h3></li>
                        <li class="s-5"><h3><a href="">Полезная информация</a></h3></li>
                </ul>
                <div class="empty"> </div>
        </div>
        </div>
        <!-- CONTENT #End /-->

</div>
<!-- PAGE #End /-->

<!-- Footer #Begin /-->
<div id="footer"></div>
<!-- Footer #End /-->

</body>

CSS

@charset "utf-8";
@import"reset.css";

html, body {height: 100%; background: #cce7fc url('./images/bg_footer.jpg') repeat-x bottom center;}

#container {width: 990px; margin: 0 auto; min-height: 100%; margin-bottom: 0px;}
* html #container {height: 100%;}
#page-empty {width: 100%; height: 0px; clear: both;}
a {outline: none; -moz-outline: 0; border: none; border-width: 0px;}
a:active {outline: none; -moz-outline: 0;}
a:focus {outline: none; -moz-outline: 0;}
.empty {clear: both;}

/* header */
#header {position: relative; width: 990px; height: 407px; background:blue url('./images/bg_header.png') no-repeat top center; margin: 0 auto;}
#header .tel {position: absolute; width: 150px; height: 43px; margin: 25px 0 0 773px; font: bold 14px 'Trebuchet MS'; color: #6fa0b4; background: url('./images//tel.png') no-repeat 0 0; text-indent: -9999px; overflow: hidden; display: block;}
#header .mail {position: absolute; margin: 80px 0 0 779px; isplay: block;}
#header .mail a {font: normal 14px 'Trebuchet MS'; color: #cc6d08; text-decoration: underline;}
#header .mail a:hover {text-decoration: underline;}

/* content */
#content {width: 990px; margin: 0; vertical-align: top; z-index: 2; background:red;}
#middle {width: 100%; padding: 0 0 0 0; height: 1%;}
#middle:after {content: '.'; display: block; clear: both; visibility: hidden;}

#content ul.persi {position: relative; width: 930px; height: 263px; z-index: 2;}
#content ul.persi h3 a {font: bold 18px 'Trebuchet MS'; color: #ffffff; text-align: center; overflow: hidden; text-indent: -9999px; text-decoration: none;}
#content ul.persi li {float: left; margin: -85px 0 0 0; z-index: 2;}

#content ul.persi li.s-1 a {width: 189px; height: 263px; display: block; background: url('./images/s1_catalog.png') no-repeat;}
#content ul.persi li.s-2 a {width: 161px; height: 263px; display: block; background: url('./images/s2_new_news.png') no-repeat;}
#content ul.persi li.s-3 a {width: 214px; height: 263px; display: block; background:...