JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">
        <div class="header-left">
            <a href="#"><img src="images/header_logo.png" alt="logo" /></a>
            <ul class="about">
                <li class="first"><a href="#">О компании</a></li>
                <li class="active"><a href="#">Спецпредложения</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
            <ul class="ico">
                <li><a href="#"><img src="images/haus-ico.png" alt="ico" /></a></li>
                <li><a href="#"><img src="images/mail-ico.png" alt="ico" /></a></li>
                <li><a href="#"><img src="images/link-ico.png" alt="ico" /></a></li>
            </ul>
        </div>
        <div class="header-right">
                <a href="mailto:[email protected]" id="header_mail">[email protected]</a>
                <p class="header_p_first">Звоните нам</p>
                <p class="header_number"><span>+7 (351) 283 28 47</span>   <span>+7 908 055 88 11</span></p>
                <p>Оставьте номер и мы вам перезвоним</p>
        </div>
        <div class="clear"></div>
        <div class="scroll_techin">
            <ul>
                <li><a href="#"><img src="images/tech1.png" /></a></li>
                <li><a href="#"><img src="images/tech1.png"  /></a></li>
                <li><a href="#"><img src="images/tech1.png"  /></a></li>
                <li><a href="#"><img src="images/tech1.png"  /></a></li>
                <li><a href="#"><img src="images/tech1.png" /></a></li>
                <li><a href="#"><img src="images/tech1.png"  /></a></li>
                <li><a href="#"><img src="images/tech1.png"  /></a></li>
                <li class="last"><a href="#"><img src="images/tech1.png" /></a></li>
            </ul>
        </div>
    </div>
</div>

CSS

* {
    padding:0;
    margin:0;
}

img {
    border:none;
}

.clear {
    clear:both;
}

body {
    font-family:Tahoma, sans-serif;
    background-color:#fcfdfd;
}

.wrapper {
    width:1020px;
    height:1318px;
    outline:1px solid green;
    margin: 0 auto;
    background:#F7FAFB url(../images/wrapper_bg.png) bottom left no-repeat;
}

.header {
    height:304px;
    outline:1px solid red;
    overflow:hidden;
}

.header-left {
    width:580px;
    height:120px;
    float:left;
    overflow:hidden;
}

.header-left a img {
    margin-left:5px;
    float:left;
}

.header-left .about {
    float:left;
    list-style-type: none;
    margin:60px 0 0 -26px;
}

.header-left .about li {
    float:left;
    border-left:1px solid #cccece;
    padding:0 16px 0 16px;
}

.header-left .about .first {
    border-left:none;
}

.header-left .about a {
    text-decoration:none;
    font-size:12px;
    color:#3d3d3d;
    
}

.header-left .about a:hover {
    color:#af2c2c;
}

.header-left .ico {
    float:right;
    margin:-62px 85px 0px 10px;
    display: inline;
}

.header-left .ico li {
    list-style-type:none;
    float:left;
    margin-left: 12px;
}

.header-right {
    width:432px;
    height:98px;
    float:left;
    overflow:hidden;
    padding:22px 0 0 8px;
}

.header-right a {
    font-size:12px;
    color:#a72c2c;  
    display:block;
    margin-bottom:12px;
}

.header-right p {
    font-size:12px;
    color:#a0a0a0;
}

.header_p_first {
    margin-bottom:8px;
    display:block;
}

.header_number {
    margin-bottom:5px;
    display:block;
}

.header-right span {
    color:#cf3232;
    font-size:18px;
    margin-right:25px;
}

.scroll_techin {
    width:941px;
    height:108px;
    outline:1px solid blue;
    background:url(../images/scroll_techin.png) no-repeat;
    margin:0 auto;
    overflow:hidden;
}

.scroll_techin ul {
    margin:12px 36px 0 22px;
}


.scroll_techin ul li {
    list-style-type:none;
    float:left;
    margin-right:22px;
    width:88px;
   ...