JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header clearfix">
<div class="container">
    <div class="logo"></div>
    <div class="menu-right"></div>

    <div class="menu-center">
      <ul class="menu1">
        <li class="men1"><a href="#">Item</a> </li> 
                               <div class="submenu1"></div>
     </ul> 
    </div>
</div> 
</div>

CSS

* {
  color: red;
}
.container {
 width: 1140px;
 margin: 0 auto;
}

.clearfix::after {
 content: "";
 display: table;
 clear: both;
}

.header {
 width: 100%;
 height: 108px;
 background-color: #262626;
 margin: 0;
 position: relative;
 z-index: 1;
}


.logo {
 width: 143px;
 height: 100%;
 float: left;
 background: #fefefe url("logo.png") no-repeat 50% 50%;
}

 .menu-right {
 width: 143px;
 height: 100%;
 float: right; 
 line-height: 108px;
 text-align: center;
}

.menu-center {
 height: 100%;
 margin-left: 153px;
 line-height: 108px;
 padding-left: 89px;
}

.container {
 width: 1140px;
 margin: 0 auto;
}

.clearfix::after {
 content: "";
 display: table;
 clear: both;
}

.header {
 width: 100%;
 height: 108px;
 background-color: #262626;
 margin: 0;
 position: relative;
 z-index: 1;
}


.logo {
 width: 143px;
 height: 100%;
 float: left;
 background: url("logo.png") no-repeat 50% 50%;
}

 .menu-right {
 width: 143px;
 height: 100%;
 float: right; 
 line-height: 108px;
 text-align: center;
}

.menu-center {
 height: 100%;
 margin-left: 153px;
 line-height: 108px;
 padding-left: 89px;
}

.submenu1 {
display: block;
width: 100%;
height: 80px;
background-color: grey;
overflow: hidden;
position: absolute;
left: 0;
top: 28px;
transition: 1s;
z-index: 100;
}

.men1:hover + .submenu1 {
transform: translateY(50px);
}