JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<nav id="cssmenu">
    <div id="menu-button" class="menu-opened">
        <div class="css-menu-mobile-button"><span class="fa fa-bars"></span> Menu</div>
    </div>
    <ul style="display: block;" class="open">
        <li class="has-sub">
            <span class="submenu-button"></span><a href="/gb/outdoor-courses">Outdoor Courses</a>
            <ul class="sub-menu">
                <li><a href="/gb/outdoor-courses">All Courses</a></li>
            </ul>
        </li>
        <li class="has-sub">
            <span class="submenu-button"></span><a href="/gb/gap-year-programs">Gap Year Programs</a>
            <ul class="sub-menu" style="display: none;">
                <li><a href="/gb/gap-year-programs">All</a></li>
                <li><a href="/gb/gap-year-programs/adventure-travel">Adventure Travel</a></li>
                <li><a href="/gb/gap-year-programs/discover-range">Discover Range</a></li>
                <li><a href="/gb/gap-year-programs/community-volunteering">Community Volunteering</a></li>
                <li><a href="/gb/gap-year-programs/marine-conservation">Marine Conservation</a></li>
                <li><a href="/gb/gap-year-programs/outdoor-training-courses">Outdoor Training</a></li>
                <li><a href="/gb/gap-year-programs/summer-programs">Summer Programs</a></li>
                <li><a href="/gb/gap-year-programs/wildlife-conservation">Wildlife Conservation</a></li>
                <li><a href="/gb/gap-year-programs/multi-country-trips">Multi-Country Trips</a></li>
            </ul>
        </li>
        <li class="has-sub">
            <span class="submenu-button"></span><a href="/gb/gap-year-destinations">Destinations</a>
            <ul class="sub-menu" style="display: none;">
                <li><a href="/gb/gap-year-destinations">All Destinations</a></li>
                <li><a href="/gb/destination/africa">Africa</a></li>
                <li><a href="/gb/destination/asia">Asia</a></li>
                <li><a...

SCSS

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
	margin: 0;
	padding: 0;
	position: relative;
}

#cssmenu {
line-height:1;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background: #f2f2f2; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f2f2 0%, #ffffff 5%, #f6f6f6 87%, #e7e7e7 96%, #d8d8d8 98%, #e3e3e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(5%,#ffffff), color-stop(87%,#f6f6f6), color-stop(96%,#e7e7e7), color-stop(98%,#d8d8d8), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f2f2 0%,#ffffff 5%,#f6f6f6 87%,#e7e7e7 96%,#d8d8d8 98%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f2f2 0%,#ffffff 5%,#f6f6f6 87%,#e7e7e7 96%,#d8d8d8 98%,#e3e3e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f2f2 0%,#ffffff 5%,#f6f6f6 87%,#e7e7e7 96%,#d8d8d8 98%,#e3e3e3 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f2f2 0%,#ffffff 5%,#f6f6f6 87%,#e7e7e7 96%,#d8d8d8 98%,#e3e3e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */
/*border-bottom: 2px solid #0fa1e0; */
z-index:99999;
width:auto;
}
#cssmenu:after,
#cssmenu ul:after {
	content: '';
	display: block;
	clear: both;
}
#cssmenu a {
	display: block;
	padding:18px 0;
	width:155px;
	text-decoration: none;
	text-align:center;
	border-right:1px solid #ddd;
}

#cssmenu ul {
	list-style: none;
}
#cssmenu > ul > li {
	display: inline-block;
	float: left;
	margin: 0;
}

#cssmenu > ul > li > a {
	color: #666;
	font-size: 16px;
}

#cssmenu > ul > li.has-sub:hover:after {
	/* Arrow */
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	bottom: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #eee;
	margin-left:...