JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Начало шапки сайта  -->
<div class="header">
    <div class="leftHeader">
        <ul>
            <li><a href="#"><img src="images/social.png" alt="social" /></a></li>
            <li><a href="#"><img src="images/social.png" alt="social" /></a></li>
            <li><a href="#"><img src="images/social.png" alt="social" /></a></li>
            <li><img src="images/socialLine.png" alt="socialLine" /></li>
            <li class="last">Следи за нами в <br />социальных сетях!</li>
        </ul>
        <div class="clr"></div>
        <div class="logo">
            <h1><a href="/" class="logo">COOLWAREZSITE.<span>COM</span></a></h1>
            <p>Современный варез портал</p>
        </div>    
    </div>
    <div class="rightHeader">
        <div class="leftRuch"></div>
        <div class="banner">
            <a href="/"><img src="images/bannerImg.png" alt="banner" /></a>
        </div>
        <div class="clr"></div>
        <div class="avtorizacia">
            <input type="text" class="textPass" placeholder="Логин.." />
            <input type="password" class="textPass" placeholder="Пароль.." />
            <input type="image" src="images/go.png" class="go" />
            <p>Регистрация на сайта <br /><a href="/">Забыл пароль?</a></p>
        </div>
        <div class="userPanel"></div>
    </div>
</div>
<!-- Конец шапки сайта  -->

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

.clr {
    clear: both;
}

body {
    min-width: 977px;
    max-width:100%;
    font-family:Tahoma;
}


/*  Начало шапки сайта  */

.header {
    width:100%;
    outline:1px solid green;
    font:11px Arial;
}

.leftHeader {
    float:left;
    height:237px;   /*  Убрать  */
    outline:0px solid red;
    width:366px;
    background: url(../images/leftHeaderBg.png) 0 59px no-repeat;
}

.leftHeader ul {
    margin: 5px 0 20px 13px;
}

.leftHeader ul li {
    float:left;
    margin-right:12px;
}

.leftHeader .last {
    margin:8px 0 0 0;
    color:#bababa;
}

.logo {
    padding:60px 0 0 15px;
    overflow:hidden;
}

.logo a {
    font:bold 25px 'Myriad Pro';
    color:#8b8b8b;
    text-decoration:none;
}

.logo h1 span {
    color:#92b7d2;
}

.logo p {
    font:12px 'Myriad Pro';
    color:#8b8b8b;
    letter-spacing:2px;
    position:relative;
    margin:-6px 0 0 107px;
}

.rightHeader {
    height:237px;   /*  Убрать  */
    outline:0px solid blue;
    margin:0 0 0 366px;
    background:url(../images/rightHeaderBg.png) 0 97px repeat-x;
    overflow:hidden;
}

.leftRuch {
   ...