JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />  
  
<title>Mega Drop Down Menu</title>  
<!--[if IE 6]>  
<style>  
body {behavior: url("csshover3.htc");}  
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;  
</style>  
<![endif]-->  
  
</head>  
  
<body>  
  
<ul id="menu">  
  
    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->  
  
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->  
  
            <div class="col_2">  
                <h2>Welcome !</h2>  
            </div>  
  
            <div class="col_2">  
                <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>  
                <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>  
            </div>  
  
            <div class="col_2">  
                <h2>Cross Browser Support</h2>  
            </div>  
  
            <div class="col_1">  
                <img src="img/browsers.png" width="125" height="48" alt="" />  
            </div>  
  
            <div class="col_1">  
                <p>This mega menu has been tested in all major browsers.</p>  
            </div>  
  
        </div><!-- End 2 columns container -->  
  
    </li><!-- End Home Item -->  
  
    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->  
  
        <div class="dropdown_5columns"><!-- Begin 5 columns container -->  
  
            <div class="col_5">  
                <h2>This is an example of a large container with 5 columns</h2>  
            </div>  
  
            <div class="col_1">  
                <p class="black_box">This is a dark grey box...

CSS

body, ul, li {  
    font-size:14px;  
    font-family:Arial, Helvetica, sans-serif;  
    line-height:21px;  
    text-align:left;  
}  
  
/* Navigation Bar */  
  
#menu {  
    list-style:none;  
    width:940px;  
    padding:0;
    margin:30px auto 0px auto;  
    height:43px;  
   /* padding:0px 20px 0px 20px;*/  
  
    /* Rounded Corners */  
  
    -moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;  
  
    /* Background color and gradients */  
  
    background: #014464;  
    background: -moz-linear-gradient(top, #0272a7, #013953);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  
  
    /* Borders */  
  
    border: 1px solid #002232;  
  
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
    box-shadow:inset 0px 0px 1px #edf9ff;  
}  
  
#menu li {  
    float:left;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:30px;  
    margin-top:7px;  
    border:none;  
}  
  
#menu li:hover {  
    border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  
  
    /* Background color and gradients */  
  
    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  
  
    /* Rounded corners */  
  
    -moz-border-radius: 5px 5px 0px 0px;  
    -webkit-border-radius: 5px 5px 0px 0px;  
    border-radius: 5px 5px 0px 0px;  
}  
  
#menu li a {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px;  
    color: #EEEEEE;  
    display:block;  
    outline:0;  
    text-decoration:none;  
    text-shadow: 1px 1px 1px #000;  
}  
  
#menu li:hover a {  
    color:#161616;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  
#menu li .drop {  
    padding-right:21px;  
    background:url("img/drop.png") no-repeat rightright 8px;  
}  
#menu li:hover .drop { ...