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>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function changeOpacity()
{
    $('#p-main-container').animate(
    {
        opacity:0
    }, 600, function()
    {
        $(this).css('opacity',0).animate(
        {
            opacity:1
        }, 600);
    });
}
</script>
<style type="text/css">
*{
padding:0;
margin:0;
}
a:link,a:visited,a:active{
outline:0;
text-decoration:none;
}
a:hover{
/*color:#0079b2;
font-size:12px;
font-weight:700;
text-decoration:underline;*/
}

/*menu*/
#menu,#menu ul{
list-style: none;
background-color:red;
}
#menu li{
float:left;
text-align:center;
}
#menu li a{
color:#d6d6d6;
padding:0 20px;
line-height:26px;
}
#menu ul{
position:absolute;
border-left:1px solid #d6d6d6;
border-right:1px solid #d6d6d6;
border-bottom:1px solid #d6d6d6;
z-index:99999
padding:0;
margin:0;
}
#menu li li{
float:none;
width:164px;
text-align:left;
}
#menu li li a{
padding: 0 5px;
line-height:30px;
}
/*end of menu*/
</style>
</head>
<body>
<div style="border:1px solid #0079b2;">
        <div style="display:table;width:100%;background-color:red;border:1px solid #d6d6d6;">
            <ul id="menu">
                <li>
                    <a href="#">Home</a>
                </li>
                <li id="sub-products" onmouseover="showSubMenu(this);" onmouseout="hideSubMenu(this);">
                    <a href="#">Products</a>
                    <ul>
                        <li>
                            <a href="#">Schedule Manager</a>
                        </li>
                        <li>
                            <a href="#">Visual Command Line</a>
                        </li>
                        <li>
                            <a href="#">Windows...