JSFiddle - React, Tailwind, and code Playground

HTML

{AJAX}
<div class="midleFIX">
    <div class="menu-bg-nav">
        <ul>
            <li><a href="/" title="">Главная</a>

            </li>
            <li><a href="/" title="">Главная</a>

            </li>
            <li><a href="/" title="">Главная</a>

            </li>
            <li><a href="/" title="">Главная</a>

            </li>
            <li><a href="/" title="">Главная</a>

            </li>
            <li><a href="/" title="">Главная</a>

            </li>
            <li><a href="/" title="">Главная</a>

            </li>
        </ul>
    </div>
    <div class="font-bg">
<a href="/" class="twiter"></a>

<a href="/" class="mail"></a>

<a href="/" class="f"></a>

<a href="/" class="google"></a>

<a href="/" class="vk"></a>

<a href="/" class="odnoklasniki"></a>

    </div>
    <div class="font-bg-slep">
        <div class="sharp">Популярные файлы</div>
        <div class="pop-files-bg"> <a href="" class="new-pop">Услуги от шаманкина</a>

        </div>
        <div class="pop-file-bg2">
            <div class="sharp2">Мини-Профиль</div>
            <div class="sharp3">{login}</div>
        </div>
    </div>
    <div class="block-left">{include file="block-left.tpl"}</div>
    <div class="block-right">{include file="block-right.tpl"}</div>
    <div class="block-content">{include file="content.tpl"}</div>
    <div class="block-futer">{include file="futer.tpl"}</div>
</div>

CSS

body {
    background-color:#232629;
    margin:0;
    padding:0;
    font-family:Tahoma;
}
/* Шапка */
 .midleFIX {
    margin:0 auto;
    width:800px;
}
.menu-bg-nav {
    display:block;
    background:url(../design-bs1/menu-bg-nav.png) no-repeat;
    width:820px;
    height:144px;
    margin-top:70px;
    display:block;
}
.font-bg {
    background:url(../design-bs1/font-bg.png) no-repeat;
    width:963px;
    height:94px;
    margin:-150px -70px;
    display:block;
}
.font-bg-slep {
    background:url(../design-bs1/font-bg-slep.png) no-repeat;
    width:900px;
    height:152px;
    margin:20px -39px;
    display:block;
}
.menu-bg-nav ul {
    margin:0;
    padding:0 clear:both;
}
.menu-bg-nav ul li {
    float:left;
    list-style:none;
}
.menu-bg-nav ul li a {
    color:#000;
    text-decoration:none;
    display:block;
    float:left;
    font-weight:bolder;
    font-size:13px;
    width:122px;
    height:38px;
    margin:113px -21px;
    padding:5px 0 0 30px;
}
.menu-bg-nav ul li a:hover {
    background:url(../design-bs1/menu-bg-navactiv.png) no-repeat;
    margin:113px -21px;
}
a.twiter {
    background:url(../design-bs1/twiter.png) no-repeat;
    width:24px;
    height:24px;
    float:left;
    display:block;
    margin:0 -877px;
}
a:hover.twiter {
    background:url(../design-bs1/twiter-activ.png) no-repeat;
    width:24px;
    height:24px;
}
a.mail {
    background:url(../design-bs1/mail.png) no-repeat;
    width:24px;
    height:24px;
    margin:0 3px;
    display:block;
    float:right;
}
a:hover.mail {
    background:url(../design-bs1/mail-activ.png) no-repeat;
    width:24px;
    height:24px;
}
a.f {
    background:url(../design-bs1/f.png) no-repeat;
    width:24px;
    height:24px;
    margin:29px -877px;
    display:block;
    float:left;
}
a:hover.f {
    background:url(../design-bs1/f-activ.png) no-repeat;
    width:24px;
    height:24px;
}
a.vk {
    background:url(../design-bs1/vk.png) no-repeat;
    width:24px;
    height:24px;
   ...