JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<div id="header">
<div id="menu">

<div class="menu2">
<ul>
<li><a class="menu2one" href="#nogo">Home</a></li>
</ul>
<ul>
<li><a class="menu2two" href="#nogo">Products
<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <table><tr><td>
    <ul>
    <li><a href="#nogo">Mobiles</a></li>
    <li><a href="#nogo">Photoframes</a></li>
    <li><a href="#nogo">Tripods</a></li>
    <li><a class="drop" href="#nogo">Cameras
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <table><tr><td>
        <ul>
        <li class="group">Minolta</li>
        <li><a href="#nogo">SLRs</a></li>
        <li><a href="#nogo">Compact</a></li>
        <li><a href="#nogo">Digital</a></li>
        <li><a href="#nogo">Video</a></li>
        <li class="group">Cannon</li>
        <li><a href="#nogo">SLRs</a></li>
        <li><a href="#nogo">Compact</a></li>
        <li><a href="#nogo">Digital</a></li>
        <li><a href="#nogo">Video</a></li>
        <li class="group">Nikon</li>
        <li><a href="#nogo">SLRs</a></li>
        <li><a href="#nogo">Compact</a></li>
        <li><a href="#nogo">Digital</a></li>
        <li><a href="#nogo">Video</a></li>
        <li class="group">Olympus</li>
        <li><a href="#nogo">SLRs</a></li>
        <li><a href="#nogo">Compact</a></li>
        <li><a href="#nogo">Digital</a></li>
        <li><a href="#nogo">Video</a></li>
        </ul>
        </td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </li>
    <li><a href="#nogo">Memory cards</a></li>
    <li><a href="#nogo">Camcorders</a></li>
    </ul>
    </td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu2three" href="#nogo">Services
<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <table><tr><td>
    <ul class="scroller">
    <li><a href="#nogo">Photography</a></li>
    <li><a href="#nogo">Video editing</a></li>
    <li><a href="#nogo">Web site Design</a></li>
    <li><a href="#nogo">Reference guides</a></li>
    <li><a href="#nogo">Photo-editing</a></li>
    <li><a...

CSS

#header {
    height: 72px;
    width: 940px;
    margin-left: 16px;
    position: relative;
    background-color:green;
}
#menu{
    width: 700px;
    float: left;
    text-align: left;
    background-color:Orange;        
}

.menu2 {
    float:left; 
    width:700px; 
    font-family: verdana, arial, sans-serif; 
    font-size:11px; 
    border-top:1px solid #c00;
    background:#ddd url("http://i.imgur.com/JboaN.gif") repeat-x; 
    margin:10px 0 0 0; 
}
.menu2 ul {
    padding:0;
    margin:0;
    list-style-type:none;
}
.menu2 ul li {
    float:left; 
    position:relative;
}
.menu2 ul li.group {
    display:block; 
    text-indent:10px; 
    background:#666; 
    color:#ff0; 
    width:152px; 
    padding:4px 0;
}

.menu2 ul li a, .menu2 ul li a:visited {
    float:left; 
    display:block; 
    text-decoration:none; 
    color:#444; 
    padding:0px 16px; 
    line-height:25px; 
    height:30px;
}

.menu2 ul li:hover {
    width:auto;
}

.menu2 ul li a:hover {
    background:#aaa url("http://i.imgur.com/7TWPl.gif"); 
    color:#c00;
}

.menu2 ul li:hover a {
    background:#aaa url("http://i.imgur.com/7TWPl.gif"); 
    color:#c00;
}

.menu2 ul li ul {
    display: none;
}
.menu2 table {
    margin:0; 
    border-collapse:collapse; 
    font-size:11px; 
    position:absolute; 
    top:0; 
    left:0;
}

/* specific to non IE browsers */
.menu2 ul li:hover ul {
    display:block; 
    position:absolute;
    top:29px; 
    background:#aaa; 
    margin-top:1px; 
    left:0; 
    width:152px;
}

.menu2 ul li:hover ul.scroller {
    height:138px; 
    width:172px; 
    overflow:auto;
}

.menu2 ul li:hover ul.endstop {
    left:-90px;
}
.menu2 ul li:hover ul li ul {
    display: none;
}
.menu2 ul li:hover ul li a {
    display:block; 
    background:#aaa; 
    color:#fff;
    height:auto;
    ine-height:15px;
    padding:4px 16px; 
    width:120px;
}
.menu2 ul li:hover ul li a.drop {
    background:#888;
}
.menu2 ul li:hover ul li a:hover {
    color:#ff0; 
   ...