JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header_container">
<div id="Head"> 
<img src="img/logo.png" width="380" height="100" alt="Logo" /> 
</div> 
   <div class="navcontainer">
<div id="nav">
<ul> 
<li><a href="#">HOME</a></li> 
<li><a href="#">ABOUT</a></li> 
<li><a href="#">PROJECTS</a></li> 
<li><a href="#">GALLERY</a></li> 
<li><a href="#">CONTACT</a></li> 
</ul> 
</div> 
    </div>
</div>

CSS

.header_container {
    position:relative;
    display: table;
}
#Head 
{ 
margin-left:120px; 
margin-right:150px; 
width:200px; 
height:150px; 
background: red;
float:left;
} 
/*------------------------*/ 
.navcontainer {
    position: relative;
    height:150px;
    float: left;
}
#nav { 
    background: green;
    position:absolute;
    bottom: 0;
    height: auto;
    width: 600px;
} 

#nav ul{ 
margin: auto 0; 
padding: 0; 
list-style-type: none; 
text-align: center;
position: relative;
} 
#nav ul li { 
    position: relative;
    display: inline; 
    height: auto;
    bottom: 0;
    margin: auto 0;
} 
#nav ul li a{ 
text-decoration: none; 
padding: .2em 1em; 
color:#000; 
font-size:18px; 
} 
#nav ul li a:hover{ 
color:#008c00; 
}