JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top"></div>
<div class="container">
<div class="header">
<div style="display: table-cell; width: 250px; text-align: center;">
LOGO
</div>
<div style="display: table-cell;">
<br><br><br>
<ul>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
<li><a href="#">Monkey 4</a></li>
<li><a href="#">Monkey 5</a></li>
<li><a href="#">Monkey 6</a></li>
<li><a href="#">Monkey 7</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
<div class="content"></div>
</div>

CSS

ul{
    padding: 0;
    list-style: none;
}
ul li{
    float: left;
    width: 100px;
    text-align: center;
}
ul li a{
    display: block;
    padding: 5px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover{
    color: #fff;
    background: #939393;
}
ul li ul{
    display: none;
}
ul li:hover ul {
    display: block; /* display the dropdown */
    position: absolute;
    width: 100px;
    z-index: 100;
}
.top{
    background: #1b2d3c;
    width: 100%;
    height: 40px;
}
.container{
    width: 1100px;
    height: 1000px;
}
.header{
    display: table-row;
    width: 1100px;
    height: 130px;
}
.content{
    position: absolute;
    background: #fff;
    width: 1100px;
    height: 500px;
}
* {
    background: #87a0b4;
    margin: 0px;
    padding: 0px;
    margin-left: auto ;
    margin-right: auto ;
}