JSFiddle - React, Tailwind, and code Playground

by MarmiK

HTML

<div id="container" align="center">Container
    	
       <div id="container2">CONTAINER 2
       
       		<div id="wrapper">
        	
            	<div id="header">Header </div>
            
            
           			 <div id="menubar">
            			<ul id="mcolor">
							<li><a href="default.asp"><font color="#000000"> 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{padding:0;margin:0;
}

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

#container2
{
	width:1080px;
	background-color:#FFF;
	min-width:1024;
	
		
}

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

#header
{
	width:900px;
	min-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 > a
{
	 background-color:#ffd640; <!-- sets all link color when hovering to yellow  -->
}

nk */