JSFiddle - React, Tailwind, and code Playground

HTML

<nav role="navigation">
	<ul id="topmenu" role="menubar">
            <li><a href="#">HOME</a>

            <li><a href="services/">SERVICES &#721;</a>
            	<ul>
                    <li><a href="#">Service 1</a></li>
                    <li><a href="#">Service 2</a></li>
                </ul>
            <li><a href="#">CAREERS &#721;</a>
            	<ul>
                    <li><a href="#">Career Opportunities</a></li>
                    <li><a href="#">Volunteer Opportunities</a></li>
                </ul>
            <li><a href="about-us/">ABOUT US &#721;</a>
                <ul>
                    <li><a href="#">Our Values</a></li>
                    <li><a href="about-us/why-choose-us/">Why Choose us?</a></li>
                </ul>
            <li><a href="contact-us/">CONTACT US</a></li>
        </ul>
        </nav>

CSS

nav {
    z-index: 10001;
    position: relative;
    display: block;
    width: 100%;
    height: 45px;
	background:#063058 url("images/noise.png");
    text-transform: uppercase;
    border-bottom: 1px solid white;
    color:white;
    text-shadow: none;
}
#topmenu {
    margin: 0 auto;
}
nav ul {
    padding-left: 25%;
    white-space: nowrap;
    height: 100%;
    list-style: none;
    position: relative;
    display: inline-block;
}
nav ul ul {
    visibility: hidden;
    opacity:0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    transition: opacity 0.3s linear, visibility 0.3s linear;
    -webkit-transition: opacity 0.3s linear, visibility 0.3s linear;
    -moz-transition: opacity 0.3s linear, visibility 0.3s linear;
    -o-transition: opacity 0.3s linear, visibility 0.3s linear;
}
nav ul ul li {

	border: 1px solid #afafaf;
}
nav ul ul li:last-child {
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom: 1px solid #afafaf;
}

nav ul li a:hover {
    padding: 13px 20px;
    color: green;
}
nav ul ul {
    padding: 0;
    position: absolute;
}
nav ul ul li {
    float: none;
    border-bottom: 1px solid #b7b7b7;
    border-top: 1px solid #fff;
    position: relative;
    background: -webkit-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
	background: linear-gradient(#eeeeee 0%, #d4d4d4 100%);
	background: -moz-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
	background: -o-linear-gradient(#eeeeee 0%, #d4d4d4 100%);
	-moz-box-shadow: inset 2px 2px 5px #ccc;
	-webkit-box-shadow: inset 2px 2px 5px #ccc;
	box-shadow: inset 2px 2px 5px #ccc;
}
nav ul ul li a {
    padding: 13px 20px;
    color: #063058;
}
nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

nav ul li {
    float: left;
}

#topmenu li a:hover {
	background:...