JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="nav">
      <ul>
        <li><a href="#">Menu1</a>
          <ul>
            <li><a href="menu.html">Item1</a></li>
            <li><a href="menu.html">Item2</a></li>
            <li><a href="menu.html">Item3</a></li>
            <li><a href="menu.html">Item4</a></li>
          </ul>
        </li>
        <li><a href="#">Menu2</a>
          <ul>
            <li><a href="menu.html">Item1</a></li>
            <li><a href="menu.html">Item2</a></li>
            <li><a href="menu.html">Item3</a></li>
            <li><a href="menu.html">Item4</a></li>
          </ul>
        </li>
        <li><a href="#">Menu3</a>
          <ul>
            <li><a href="menu.html">Item1</a></li>
            <li><a href="menu.html">Item2</a></li>
            <li><a href="menu.html">Item3</a></li>
            <li><a href="menu.html">Item4</a></li>
          </ul>
        </li>
      </ul>
    </div>
</body>

CSS

#nav ul
{
	padding:0;
	margin:0;
	list-style:none;
	text-align:center;
}

#nav ul li
{
	float:left;
	border:1px solid #fff;
	margin:0 15px;
}

#nav ul li a
{
	color:#8799B3;
	display:block;
	padding:10px 6px;
	position:relative;
	border:none;
	z-index: 1000;
}

#nav ul li:hover
{
	color:#415161;
	border-left:1px solid #E9E9E9;
	border-right:1px solid #E9E9E9;
	border-top:1px solid #E9E9E9;
	border-radius:5px 5px 0 0;
}

#nav ul li a:hover
{
	color:#415161;
}

#nav ul li ul
{
	display:none;
}

#nav ul li:hover ul
{
	display:block;
	text-decoration:none;
	line-height:1;
	color:#8799B3;
	background:#fff;
	position:absolute;
	width:165px;
	border:0;
}

#nav ul li ul li
{
	border:none;
	float:none;
	text-align:left;
	display:block;
	position:relative;
	font-size:14px;
	margin:0;
	top:-5px;
	left:-1px;
	z-index: 999;
}

#nav ul li ul li:hover
{
	border:none;
	color:#415161;
	background:#F7F9FB;
}

#nav ul li ul li a
{
	padding:10px;
	border:none;
	color:#8799B3;
	border-left:1px solid #E9E9E9;
	border-right:1px solid #E9E9E9;
	border-bottom:1px solid #E9E9E9;
}

#nav ul li ul li:first-child a
{
	border-top:1px solid #E9E9E9;
	border-radius:0 5px 0 0;
}

#nav ul li ul li:last-child a
{
	border-bottom:1px solid #E9E9E9;
	border-radius:0 0 5px 5px;
}

#nav ul li ul
{
	-webkit-transition:height .5s ease-in;
	-moz-transition:height .5s ease-in;
	-o-transition:height .5s ease-in;
	-ms-transition:height .5s ease-in;
	transition:height .5s ease-in;
}