JSFiddle - React, Tailwind, and code Playground

HTML

<div class="signInBarOut">
			<div class="signInBar">
				<div class="userWelcome">
					<p>Hello,  <a href="profile.php?user=<?php echo escape($user->data()->username); ?>"><?php echo escape($user->data()->username); ?></a>!</p>
				</div>
						<ul>
							<li><a href="myaccount.php">Manage</a>
								<ul>
									<li><a href="admincustomers.php">Users</a></li>
									<li><a href="adminproducts.php">Products</a></li>
								</ul>
							</li>
							<li><a href="">Reports</a>
								<ul>
									<li><a href="ratingresults.php">Poll</a></li>
									<li><a href="newsletterresults.php">Newsletter</a></li>
								</ul>
							</li>
							<li><a href="">Shipping</a>
								<ul>
									<li><a href="shippingStatus.php">Status</a></li>
									<li><a href="shippingHistory.php">History</a></li>
									<li><a href="shippingReport.php">Report</a></li>
								</ul>
							</li>
							<li><a href="">Orders</a>
								<ul>
									<li><a href="orderhistory.php">History</a></li>
								</ul>
							</li>
							<li><a href="update.php">Update details</a>
								<ul>
									<li><a href="profile.php?user=<?php echo escape($user->data()->username); ?>">My Profile</a></li>
									<li><a href="changepassword.php">Password</a></li>
								</ul>
							</li>
							<li><a href="communitySignedIn.php">Community</a></li>
						</ul>
					
			</div>
		</div>

CSS

.signInBarOut {
	width: 100%;
	background: #E0E0E0; 
	position: relative;
	top: -16px;
	left: 0;
	right: 0;
}
.signInBar {
	display: block;
	position: relative;
	width: 960px;
	height: 50px;
	font: 16px Sans-serif;
	margin: 0px auto;
}
.signInBar li a {
	text-decoration: none;
	display: block;
	color: #000000;
	padding: 16px 25px;
}
.signInBar li:hover ul {
	display: block;
}
.signInBar ul {
	margin-top: -34px;
	padding: 0px;
}
.signInBar li {
	position: relative;
	float: right;
	list-style-type: none;
}
.signInBar ul:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}
.signInBar ul ul {
	position: absolute;
	display: none;
	left: 0px;
	background-color: #282828;
	margin-top: 0px;
}
.signInBar ul ul li {
	text-align: center;
	border-top: none;
	width: 150%;
}
.signInBar ul ul li a {
	color: #ffffff;
	background-color: #484848;
}
.signInBar li:hover a {
	color: #ffffff;
}
.signInBar li:hover a{
	background-color: #282828;
	-o-transition:color .4s ease-out, background .3s ease-in;
	-ms-transition:color .4s ease-out, background .3s ease-in;
	-moz-transition:color .4s ease-out, background .3s ease-in;
	-webkit-transition:color .4s ease-out, background .3s ease-in;
	/* ...and now for the proper property */
	transition:color .4s ease-out, background .3s ease-in;
}
.signInBar li li a:hover {
	color: #ffffff;
	background-color: #7ac9b7;
	-o-transition:color 1s ease-out, background .3s ease-in;
	-ms-transition:color 1s ease-out, background .3s ease-in;
	-moz-transition:color 1s ease-out, background .3s ease-in;
	-webkit-transition:color 1s ease-out, background .3s ease-in;
	/* ...and now for the proper property */
	transition:color 1s ease-out, background .3s ease-in;
	
}
.signInBar li:hover{
	color: #ffffff;
	background-color: #282828;
}
.signInBar ul ul li:hover {
	color: #ffffff;
	background-color: #484848;
	-o-transition:color .1s ease-out, background .3s ease-in;
	-ms-transition:color .1s ease-out, background .3s...