JSFiddle - React, Tailwind, and code Playground

HTML

<section class="mainmenu">
<div class="menu">
	<a href="#"><h3>Меню</h3>
 <div id="sub"><a href="#">
 	<p>Субменю</p> </a></div>

<div id="sub"><a href="#">
	<p>Субменю</p></a></div>

	<div id="sub"><a href="#">
	<p>Субменю</p>
						</a></div>
				</a></div>
			<div class="menu"><a href="">
					<h3>Меню</h3>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
				</a></div>
			<div class="menu"><a href="">
					<h3>Меню</h3>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
				</a></div>
			<div class="menu lastsub""><a href="">
					<h3>Меню</h3>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
					<div id="sub"><a href="#">
							<p>Субменю</p>
						</a></div>
				</a>
			</div>
		</div>
		
		</section>

CSS

*{
    padding: 0;
    margin: 0;
}

body{

    background: white;
    padding-top: 50px;
    padding-left: 200px;
  font-family: 'Montserrat Alternates', sans-serif;
}

#sub{

    border-top: 2px solid #E5E2E2;
    background: gray;
    height: 0px;
    opacity: 0;
}
/*#sub p:last-child{
    border-radius: 30px 30px 0 0;
}*/
.lastsub a:last-child{
    border-radius: 30px 30px 0 0;
}
.mainmenu a:hover ~ #sub{
    height: 100px;
    opacity: 1;
}
.mainmenu a:hover{
    margin-bottom: 300px;
}
.menu a{
    text-decoration: none;
    color: #E5E2E2;


}
.mainmenu div{
    border: 2px solid #B18552;
    width: 300px;
    overflow: hidden;
    text-align: center;
    background: blue;
}

.mainmenu div:first-child{
    border-radius: 30px 30px 0 0;

}
.mainmenu div:last-child{
    border-radius: 0 0 30px 30px;
}
.mainmenu h3{
          transition: all 4s;
    padding: 25px 0 25px 0;
    font-size: 25px;
}

.mainmenu p{

    font-size: 20px;
       padding: 25px 0 25px 0;
}