JSFiddle - React, Tailwind, and code Playground

by Tmin10

HTML

<div class="header">
    <div class="left-line" ></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

/***ТО ЧТО Я ИЗМЕНИЛ***/
.left-line {
    height: 100px;
    background-color: white;
    float: left;
    width: 50%;
    position: absolute;
    z-index: 10;
}
.center {
    position: relative;
    z-index: 20;
}

/**********************/
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;
}