JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-topbar-container">
	<div id="header-topbar">TOP</div>
</div>
    
<div id="header-bottombar-container">
<div id="header-bottombar">
    	<div id="header-logo"><img src="http://www.integradigital.co.uk/images/company/logo.png" alt="" width="325" height="47"></div>
        
        <div id="header-menu">
            <div id="main-nav"><ul id="trans-nav">
            <li <?php if ($page == 'About') { echo 'class="current"'; }?>>
				<a href="#">About Us</a>
					<ul>
						<li><a href="/contact">Contact Us</a></li>
						<li><a href="/login">Login</a></li>
						<?php
						$sql="SELECT * from websitepages where pagetype = 'About' order by pagedesc ASC ";
						$rs=mysql_query($sql,$conn) or die(mysql_error());
						while($result=mysql_fetch_array($rs))
						{
							echo '<li><a href="/index.php?p='.$result["pagename"].'">'.$result["pagedesc"].'</a></li>';
						}
						?>
					</ul>
			</li>
            
            <li <?php if ($page == 'Telecoms') { echo 'class="current"'; }?>>
				<a href="#">Telecoms</a>
					<ul>
						<?php
						$sql="SELECT * from websitepages where pagetype = 'Telecoms' order by pagedesc ASC ";
						$rs=mysql_query($sql,$conn) or die(mysql_error());
						while($result=mysql_fetch_array($rs))
						{
							echo '<li><a href="/index.php?p='.$result["pagename"].'">'.$result["pagedesc"].'</a></li>';
						}
						?>
					</ul>
			</li>
            
            <li <?php if ($page == 'I.T. support') { echo 'class="current"'; }?>>
				<a href="#">Telecoms</a>
					<ul>
						<?php
						$sql="SELECT * from websitepages where pagetype = 'I.T. Support' order by pagedesc ASC ";
						$rs=mysql_query($sql,$conn) or die(mysql_error());
						while($result=mysql_fetch_array($rs))
						{
							echo '<li><a href="/index.php?p='.$result["pagename"].'">'.$result["pagedesc"].'</a></li>';
						}
						?>
					</ul>
			</li>
            
            <li <?php if ($page == 'Security') { echo 'class="current"'; }?>>
				<a...

CSS

/* Global properties---------------------------------------- */
body {
	font-family: Calibri;
	font-size: 100%;
	color: #323232;
	position: relative;
	min-width: 60%;
}
html { height:100%;}

/* Full size menu-------------------------------------------- */
#main-nav {
	width:100%;
}
#trans-nav {
	list-style-type: none; 
	height: 40px; 
	padding: 0; 
	margin: 0;
	position:relative;
	z-index:999;
}
#trans-nav {
	list-style-type: none; 
	height: 40px; 
	padding: 0; 
	margin: 0;
}
#trans-nav li {
	float: left; 
	position: relative; 
	padding: 0; 
	line-height: 40px;
}
#trans-nav li:hover {
	background-position: 0 -40px;
}
#trans-nav li a {
	display: block; 
	padding: 0 15px; 
	color: #666666; 
	text-decoration: none;
}
#trans-nav li a:hover {
	background-color:#F36F25; 
	color: #eeeeee;
}
#trans-nav li ul {
	opacity: 0;
	position: absolute;
	left: 0;
	width: 260px;
	background: #EEEEEE;
	list-style-type: none;
	padding: 0;
	margin: 0; 
}
#trans-nav li:hover ul {
	opacity: 1; 
}
#trans-nav li ul li {
	float: none; 
	position: static; 
	height: 0; 
	line-height: 0; 
	background: none;
}
#trans-nav li:hover ul li {
	height: 30px;
	line-height: 30px;
}
#trans-nav li ul li a {
	background: #EEEEEE;
}
#trans-nav li ul li a:hover {
	background: #666666;
	color:#EEEEEE;
}

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }

/* small menu-------------------------------------------- */
#small-nav {
	width: 100%;
	height: 40px;
	margin: 0 0 20px;
	padding: 0;
	float: left;
	display: none;
	background-color: #F3F3F3;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
#small-nav select {
	width: 90%;
	height: 30px;
	margin: 5px 5%;
	float: left;
	background: #fff;
	border: 1px solid #ccc;
}

/* menu global-------------------------------------------- */
@media only screen and (max-width: 600px) {
	#small-nav...