JSFiddle - React, Tailwind, and code Playground

HTML

<nav class = "nav-mega-menu">
<nav class="nav-mega-menu" role="navigation">
						<ul id="menu-mm-megamenu" class="menu"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9"><a href="#">TOP MENU ITEM LONG</a>
<ul class="sub-menu">
	<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">SUB MENU ITEM</a></li>
	<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#">SUB MENU ITEM</a></li>
</ul>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-12"><a href="#">TOP ITEM</a>
<ul class="sub-menu">
	<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">SUB MENU ITEM</a></li>
	<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">SUB MENU ITEM</a></li>
	<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SUB MENU ITEM</a></li>
</ul>
</li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16"><a href="#">TOP MENU ITEM LONG</a>
<ul class="sub-menu">
	<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">SUB MENU ITEM</a></li>
	<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">SUB MENU ITEM</a></li>
	<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">SUB MENU ITEM</a></li>
	<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">SUB MENU ITEM</a></li>
</ul>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom...

CSS

nav {
 background: #4522FB;
 font-family: sans-serif;
}

.nav-mega-menu .menu-item-has-children a {
	font-size: 2.2rem;
	color: #fff;
}

.nav-mega-menu .menu-item-has-children > a:after {
	display: block;
	content: "";
	height: 0.5rem;
	width: 100%;
	background: linear-gradient(to right, #51E5FF, #0295FE);
}

.nav-mega-menu ul {
	max-width: 128.0rem;
	margin: 0 auto;
	overflow: hidden;
	padding: 5rem 0;
}

.nav-mega-menu .menu-item-has-children {
	display: block;
	width: 19%;
	float: left;
	padding: 0 2rem;
}

.nav-mega-menu .sub-menu a {
	font-size: 1.8rem;
	font-weight: 400;
	color: #51E5FF;
}

.mega-menu-bottom {
	clear: both;
	display: block;
}