JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li> <a href="#" class="main-menu">vcdsfds</a>
      <ul class="sub-menu">
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
      </ul>
    </li>
    <li> <a href="#" class="main-menu">vcdsfds</a>
      <ul class="sub-menu">
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
        <li><a href="#">vcdsfds</a></li>
      </ul>
    </li>
    <li> <a href="#" class="main-menu">vcdsfds</a> </li>
  </ul>

CSS

ul {
    list-style: none;margin: 0;padding: 0;border: 0;
}
a {
    color:#4d4d4d;text-decoration: none;
}
#nav {
	position: relative;
	left: 66px;
}
#nav li {
	float: left;
	position: relative;
}
#nav a {
	display: block;
}
#nav ul {
	position: absolute;
	left: -9999px;
}
#nav ul li {
	padding-top: 1px;
	float: none;
}
#nav ul a {
	white-space: nowrap;
}
#nav li:hover ul {
	left: 0;
}
#nav li:hover ul a {
	text-decoration: none;
}
.main-menu {
	margin-right: 27px;
	margin-bottom:3px;
}
.main-menu{
	text-transform: uppercase;
}
.sub-menu {
	border: 1px solid #CCC;
	text-align:center;
}
.sub-menu li:first-child {
	margin-top: 10px;
}
.sub-menu li {
	width:174px;
}
.sub-menu li:last-child {
	margin-bottom:10px;
}
.sub-menu a {
	padding-top:4px;
	padding-bottom:4px;
}
.sub-menu a:hover {
	background:#e5e5e5;
}