JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="header">
    <div class="logo">
        LOGO
    </div>
    <div class="menu">
        <ul>
            <li>menu 1</li>
            <li>menu 2 </li>
            <li>menu 3 </li>
            <li>menu 4 </li>
        </ul>
    </div>
    
</div>

<div class="content">
    CONTENT
</div>

CSS

.header{
    background-color:red;
    width:100%;
    height:150px;
}

.header > .logo{
    width:29%;
    text-align:center;
    line-height:150px;
    color:#FFF;
    display:inline-block;
}

.header > .menu{
    width:70%;
    float:right;
    text-align:right;
    line-height:150px;
}

.header > .menu > ul{
    padding:0;
}

.header > .menu > ul > li{
    display:inline-block;
    list-style:none;
    margin:0px;
    color:#FFF;
}

.content{
    width:80%;
    margin-left:10%;
    margin-right:10%;
    min-height:250px;
    background-color:rgb(60, 58, 58);
    color:#FFF;
    line-height:250px;
    text-align:center;
    font-size:26px;
}