JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" align="center">
    	
       <div id="container2">
       
       		<div id="wrapper">
        	
            	<div id="header"><img src="tsclogo.jpg" /></div>
            
            
           			 <div id="menubar">
            			<ul id="mcolor">
                            <li class="active"><a href="default.asp" >Home </a></li>
							<li><a href="news.asp">News</a></li>
							<li><a href="contact.asp">Contact</a></li>
							<li><a href="about.asp">About</a></li>
						</ul>	
             			</div>
            
      			</div> <!--closing tag for wrapper -->
       
       
      		</div><!--closing tag for container2 -->
        
    </div>  <!--closing tag for container -->

CSS

@charset "utf-8";
/* CSS Document */
body
{
 margin:0px;
 padding:0px;
}

#container
{
	padding:30px;
	min-width:1024px;
	min-height:768px;
	background:#cee0ff;
	border:0px;
	margin:0px;
		
}

#container2
{
	
	width:1000px;
	height:730px;
	background-color:#FFF;
	
}

#wrapper
{
	min-width:800;
	min-height:600px;	
}

#header
{
	width:900px;
	height:120px;
	background-color:violet;

}

#menubar
{
	width:900px;
	height: 30px;
	padding-top:5px;
	padding-bottom:5px;
	text-decoration: none;
}



ul
{
	list-style-type:none;
	padding:0;
    margin:0;
	display:inline;
}

li
{
	list-style-type:none;
	background-color:#;
	border-right:1px solid #CCC;
    float:left;
	padding-left:30px; /*adjust space of menu text to each other*/
	padding-right:30px;
	padding-top:8px;
	padding-bottom:8px;
	
	
}



a:link 
{
	text-decoration:none;
}    /* unvisited link */
a:visited {text-decoration:none;
} /* visited link */


li:hover
{
	background-color:#ffd640;	
}

ul#mcolor li:hover 
{
	 background-color:#ffd640; <!-- sets all link color when hovering to yellow  -->
}

ul#mcolor li.active { /* <-----THIS IS NOT WORKING :( */
	background-color: #FF9900;
}

ul#mcolor li.active a{ 
 color: #fff;    
}



nk */