JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="topmenu" role="navigation"><div id="nav" class="menu-container">
<ul id="menu-main">
<li id="menu-item-1" class="current-menu-item menu-item-1"><a href="#">News</a></li>
<li id="menu-item-2" class="menu-item-2"><a href="#">Services</a></li>
<li id="menu-item-3" class="menu-item-3"><a href="#">About us</a>
<ul class="sub-menu">
    <li id="menu-item-4" class="menu-item-4"><a href="#">Contact</a></li>
</ul>
</li>
</ul></div></nav>

CSS

#topmenu {
    padding: 5px 0 0 0; 
    height: 65px;
}
#topmenu ul {
    margin:0 10px;
}
#topmenu ul li { 
    float: left; 
    position: relative; 
    font-family: 'Lato',sans-serif; 
    font-size: 13px; 
    font-weight: 400; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    margin: 0 30px 0 0; 
    color: #333; 
}
#topmenu ul li { 
    font-family: 'Lato',sans-serif; 
    font-size: 13px; 
    font-weight: 400; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    margin: 0; 
    color: #333; 
}
#topmenu ul ul { 
    display: none; 
    float: left; 
    position: absolute; 
    top: 2em; 
    left: -5px; 
    z-index: 99999; 
    padding: 5px 0 0 5px; 
    margin: 14px 0 0 0; 
    background: #fff; 
    border: 1px dashed #c1c1c1; 
    border-top: none; 
}

#topmenu ul ul li{
    position:relative;
    text-indent:0;
}

#topmenu ul ul ul { 
    left: 100%; 
    top: -20px; 
    border: 1px dashed #c1c1c1;
}
#topmenu ul ul li, 
#topmenu ul ul ul li { 
    min-width: 130px; 
    margin: 0; 
    padding: 0; 
    border: none; 
    background: #fff; 
display: block;
float: none;
position: relative;
min-width: 150px;
clear: both;
}
#topmenu >li ul>li
{
   list-style:none;
   text-indent:0;
   position:relative;
} 
#topmenu ul ul a { 
    line-height: 1.5em; 
    padding: .5em .5em .5em 1em;
    width: 10em; 
    height: auto;
}
#topmenu ul ul a:hover,
#topmenu ul ul:hover  { 
    display: inline-block;
}
#topmenu ul ul a:after { 
position: absolute;
right: 10px;
top: 50%;
margin-top: -6px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
}
#topmenu ul li a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    height: 30px; 
    line-height: 3.1em;
}
#topmenu ul li:hover > ul { 
    display: block;
}
#topmenu ul ul a:hover { 
    color: #fff;
}
#topmenu ul li:hover > a, 
#topmenu ul ul :hover > a {
    border-bottom: 1px solid #fff;
}
#topmenu li ul { 
    position: absolute;  
    display:...