JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Header</div>
<div id="content">
    <div id = "menudiv">
        <ul id="menu">
            <li><a href="">Home</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">Clients</a></li>
            <li><a href="">Contacts</a></li>
        </ul>
    </div>
    <div id = "cnt">Content asdfasdf </div>
</div>

CSS

#header {
width: 800px;
height: 150px;
background: #ccc;
margin: 0 auto 10px;
border-radius: 5px;
padding: 10px;
}
#content{
position: relative;
width: 800px;
background: #ccc;
height: 500px;
margin: 0 auto;
border-radius: 5px;
padding: 10px;
}
 
#cnt{
}
 
#menudiv{
margin-left: -85px;
margin-top:5px;
width: 150px;
height: 300px;
float: left;
position: relative;
}
 
#menu{
list-style-type: none;
}
#menu li {
background: #bbb;
display: block;
margin-bottom: 10px;
border-radius: 5px;
padding: 5px;
cursor: pointer;
}
#menu li a{
text-decoration: none;
color: #fff;
}
 
#menu li:hover {
background: #07D8FF;
}