JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainmenu">
    <a href="#" class="mlink"><div class="tab seven"><div class="mtext">tab 1</div></div></a>
    <a href="#" class="mlink"><div class="tab seven"><div class="mtext">tab 2</div></div></a>
    <a href="#" class="mlink"><div class="tab seven"><div class="mtext">tab 3</div></div></a>
    <a href="#" class="mlink"><div class="tab seven"><div class="mtext">tab 4</div></div></a>
    <a href="#" class="mlink"><div class="tab seven"><div class="mtext">tab 5</div></div></a>
    
    
    
</div>

CSS

.tab{
    position: relative;
    float: right;
    top: -150px;
    margin-right: 10px;
    height: 200px;
    background: #000;
    width: 50px; 
    -webkit-transition: all 0.6s ease-out 0.1s;
	-moz-transition: all 0.6s ease-out 0.1s;
	-o-transition: all 0.6s ease-out 0.1s;
	transition: all 0.6s ease-out 0.1s;
}
.mainmenu:hover .tab{
    top: 0px;
}
.mainmenu{
    position: relative;
	background: #a5bfff;
    height: 50px;
    max-width: 1500px;  
    -webkit-transition: height 0.6s ease-out 0.1s;
	-moz-transition: height 0.6s ease-out 0.1s;
	-o-transition: height 0.6s ease-out 0.1s;
	transition: height 0.6s ease-out 0.1s;
}
.mainmenu:hover{
    height: 200px;
}