JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper1">
	<div class="wrapper"  style="width:960px;">
        <nav>
            <ul id="css3menu" style="width:960px">			               
                <li id="energyefficiency" class="blogbutton"><a href="#" target="_self" class="nolink"><span>Energy Efficiency</span></a>
                    <ul class="submenu">
                        <li id="insulation" class="subitem"><a href="EnergyEfficiency-Insulation.html" target="_self"><span>Insulation</span></a>
                            <ul class="submenu">
                                <li id="understandinginsulation" class="subitem"><a href="EnergyEfficiency-Insulation-UnderstandingInsulation.html">Understanding Insulation</a></li>
                                <li id="atticinsulation" class="subitem"><a href="EnergyEfficiency-Insulation-AtticInsulation.html">Attic Insulation</a></li>
                                <li id="garageinsulation" class="subitem"><a href="EnergyEfficiency-Insulation-GarageInsulation.html">Garage Insulation</a></li>
                                <li id="hotwatertank" class="subitem"><a href="EnergyEfficiency-Insulation-HotWaterTank.html">Hot Water Tank Insulation</a></li>
                            </ul>
                        </li>
                        <li id="airsealing" class="subitem"><a href="EnergyEfficiency-AirSealing.html" target="_self"><span>Air Sealing</span></a>
                            <ul class="submenu">
                                <li id="airleaks" class="subitem"><a href="EnergyEfficiency-AirSealing-UnderstandingAirLeaks.html">Understanding Air Leaks</a></li>
                                <li id="atticairseal" class="subitem"><a href="EnergyEfficiency-AirSealing-AtticAirSealing.html">Attic Air Sealing with Spray Foam</a></li>
                                <li id="ductairseal" class="subitem"><a href="EnergyEfficiency-AirSealing-DuctAirSealing.html">Duct Air Sealing with Mastic</a></li>
                                <li...

CSS

.wrapper1{
	font-family: Georgia,Times New Roman,Trebuchet MS;
	font-weight:normal;font-size:16px;
	margin: 0;
	padding: 4px 0 0;
	}
.wrapper1 a{
		text-decoration: none;
	}
.wrapper1 a:hover {
	}
.wrapper1 p {
		margin: 0 0 17px;
		padding: 0;
		line-height: 18px;
	}
.wrapper {
	margin:0px;
}
nav {
	float: left;
}
ul#css3menu,ul#css3menu ul{				/*	main nav and submenu background gradient	*/
	margin:0;
	list-style:none;
	padding:0;
	background-color:#072c53;
	background-image:-o-linear-gradient(-90deg,rgba(73, 108, 144, 1),rgba(7,44,83,1)); 
	background-image:-moz-linear-gradient(-90deg,rgba(73, 108, 144, 1),rgba(7,44,83,1));   
	background-image:-webkit-gradient(linear,0%,0%,0%,0%,from(rgba(73, 108, 144, 1)),to(rgba(7,44,83,1)));  
	background-image:-webkit-linear-gradient(-90deg,rgba(73, 108, 144, 1),rgba(7,44,83,1));
	background-repeat:repeat;
	border-width:0px;
	border-style:solid;
	border-color:#000 #000 #000 #000;	
	-moz-border-radius:0px 0px 5px 5px;
	-webkit-border-radius:0px 0px 5px 5px;
	border-radius:0px 0px 5px 5px;	
}
ul#css3menu ul{				/*	first level submenu position and style	*/
	visibility:hidden;
	position:absolute;
	left:-1px;
	top:100%;
	opacity:0;
	-moz-transition:all 0.6s;
	-webkit-transition:opacity 0.6s;
	-o-transition:opacity 0.6s;
	background-color:#496c90;
	border-width:1px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-style:solid;
	border-color:#022243;
	padding:5px 5px 5px;
}
ul#css3menu li:hover>ul{
	visibility:visible;
	opacity:1;
}	
ul#css3menu li{				/*	positions main nav buttons next to each other starting from the left  */
	position:relative;
	display:block;
	white-space:nowrap;
	font-size:0;
	float:left;
}
ul#css3menu li:hover{
	z-index:1;
}
ul#css3menu ul ul{			/*  second level submenu position    */
	position:absolute;
	left:98%;top:-4px;
}
ul#css3menu{				/*	main nav position and style	  */
	padding:5px 0px 3px...