JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div style="height: 100px; background-color: lime; float: left; width: 50%; position: absolute;"></div>
    <div class="center">
        <div class="logo"></div>
        <ul class="menu-top">
            <li>меню</li>
            <li>меню</li>
            <li>меню</li>
            <li>меню</li>
            <li>меню</li>
        </ul>
        <div class="finder"></div>
    </div>
</div>
<div class="ribbon"></div>
<div class="content"></div>

CSS

html, body {
    margin: 0;
    padding: 0;
    background-color: #e5e5e5;
}
.header {
    height: 100px;
    width: 100%;
    margin-top: 60px;
}
.center {
    width: 500px;
    height: 100px;
    margin: auto;
    background-color: #fff;
}
.logo {
    background: url(logo.png) no-repeat center;
    width: 190px;
    height: 100px;
    float: left;
}
.menu-top {
    list-style: none;
}
.menu-top li {
    font-family:"myriad pro", sans-serif;
    font-size: 15px;
    float: left;
    margin-top: 43px;
    margin-left: 20px;
}
.ribbon {
    height: 160px;
    width: 100%;
    background-color: #444;
}
.content {
    width: 500px;
    margin: auto;
    margin-top: -100px;
    background-color: #fff;
    height: 300px;
}