JSFiddle - React, Tailwind, and code Playground

HTML

<div class="karkas">
    <div class="head">
        <a href="/"><img src="images/logo.png" alt="logo" class="logo" /></a>
        <ul class="menu">
            <li><a href="#">О КОМПАНИИ</a></li>
            <li><a href="#">НОВОСТИ ЦВЕТОВ</a></li>
            <li><a href="#">ДОСТАВКА ЦВЕТОВ</a></li>
            <li><a href="#">СТАТЬИ О ЦВЕТАХ</a></li>
        </ul>
        <p class="ico">
            <a href="#"><img src="images/ico-home.png" alt="home" /></a>
            <img src="images/border.png" alt="home" />
            <a href="#"><img src="images/ico-mail.png" alt="mail" /></a>
            <img src="images/border.png" alt="home" />
            <a href="#"><img src="images/ico-link.png" alt="link" /></a>
        </p>
        <div class="clear"></div>
        <div class="head-cont">
            <p class="head-phone">тел.: (+375 17) <span>328-66-22</span><br /> моб.: (+375 29) <span>606-66-22</span></p>
            <p class="head-addr">
            салон-магазин  «Планета Цветов»<br /> г. Минск, ул. Комсомольская 18<br /> 
            <a href="#">подробная контактная информация</a>
            </p>
        </div>
        <div class="head-lider">
            <img class="lider-ico" src="images/lider.png" alt="lider" />
            <a href="#"><img class="rose" src="images/rose.png" /></a>
            <h2>Букет из белых роз</h2>
            <p>Лучший подарок на день всех влюбленных!</p>
        </div>
        <img class="img1" src="images/img1.png" />
        <img class="img2" src="images/img2.png" />
    </div>


</div>

CSS

* {
    padding:0; margin:0;
}

img {
    border:none;
}

a {
    cursor:pointer;
}

.clear {
    clear: both;
}

@font-face {
    font-family: 'plumbregular';
    src: url('../fonts/plumb-regular-webfont.eot');
    src: url('../fonts/plumb-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/plumb-regular-webfont.woff') format('woff'),
         url('../fonts/plumb-regular-webfont.ttf') format('truetype'),
         url('../fonts/plumb-regular-webfont.svg#ticker') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    background-color:#d6dbcb;
    padding:18px 20px;
}

.karkas {
    min-width:945px;
    max-width:1300px;
    margin:0 auto;
}

.head {
    background:#e6edd5 url(../images/head-bg.png) left top repeat-x;
    height:500px;
    position:relative;
    overflow:hidden;
}

.head .logo {
    position:absolute;
    margin:60px 0 0 21px;
    top:0;
    left:0;
}

.head .menu {
    list-style-type:none;
    overflow:hidden;
    float:left;
    margin:50px 0 0 22%;
    position:relative;
}

.head .menu li {
    float:left;
    margin:0 10px;
    font-size:15px;
    color:#be1a2a;
    font-family: plumbregular;
}

.head .menu li a {
    color:#be1a2a;
}

.head .menu li a:hover {
    text-decoration:none;
}

.head .ico {
    float:right;
    margin:52px 25px 0 0;
}

.head .ico img {
    margin:0 5px;
}

.head-cont {
    float:right;
    text-align:right;
    margin:29px 24px 0 0;
}

.head-cont p {
    font:13px plumbregular, sans-serif;
    color:#38441b;
}

.head-cont p span {
    font-size:18px;
    color:#be1a2a;
    font-weight:bold;
}

.head-cont a {
    color:#be1a2a;
    font-size:12px;
    margin-top:3px;
    display:block;
    text-align:left;
}

.head-cont a:hover {
    text-decoration:none;
}

.head-lider {
    background: url(../images/ac.png) left top  no-repeat;
    width:397px;
    height:286px;
    margin:0 auto;
    position:relative;
    padding:25px 0 0 55px;
    top:110px;  
}

.lider-ico {
...