JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div id="header">
        <div id="menu">
            <ul>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
            </ul>
        </div>
    </div>
    <div id="sidebar">
            <ul>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
                <li><a href="">element</a></li>
            </ul>
    </div>
</div>

CSS

body{
    background: url(../images/pattern-1.png)#242424;
    background-size: 30px;
    padding: 0;
    margin: 0;
}
.wrap{
    width: 1000px;
    margin: 0 auto;
}
#header{
    height: 150px;
}
#menu{
    background: #009dff;
    opacity: 0.7
}
#menu li{
    list-style: none;
    display: inline-block;
    
}
#menu li a{
    display: block;
    height: 30px;
    padding-top: 10px
}
#sidebar{
    background: #129366;
    
}
#sidebar li{
    list-style: none;
    background: #ff0;
    
}