JSFiddle - React, Tailwind, and code Playground

HTML

<body class="bodies" onLoad="MM_preloadImages('images/camp_isb_hov.png','images/camp_khi_hov.png')" background="./images/header_bg.png">

<table width="908" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td rowspan="4" width="4" bgcolor="#FFFFFF"></td>
    <td colspan="2" width="900" height="185" background="./images/header_bg.png">

    <table width="900" height="180" border="0" cellpadding="10" cellspacing="0" background="/images/header_bg.png">
<tr>
    <td rowspan="3" align="right" width="160" >
    <a href="index.php"><img src="./images/bu_logo.png" border="0" title="go to Home Page - Bahria"></a>
    </td>
    <td rowspan="2"><a href="index.php"><img src="./images/bu_title.png" border="0" title="go to Home Page - Bahria"></a></td>
    <td align="right" valign="top">
        <font face="Calibri" color="#0552a7" size="2">
        <a href="index.php" class="headers">&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;</a>|
        <a href="index.php" class="headers">&nbsp;&nbsp;Blog&nbsp;&nbsp;&nbsp;</a>|
        <a href="index.php" class="headers">&nbsp;&nbsp;FAQ&nbsp;&nbsp;&nbsp;</a>|
        <a href="index.php" class="headers">&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;</a>            
        </font>

    </td>        
</tr>
<tr>
    <td align="right" valign="top">
    
    <form name="search_form" action="" method="POST" class="forms">
    <input type="text" name="search_text" class="textboxes" value="search here..." onFocus="this.value='';">            
    <input type="submit" name="search_bt" value="Go" class="header_bt">
    </form>
    
    </td>
</tr>
<tr>

    <td colspan="02" height="*" valign="bottom">
    
        <table  border="0" align="right" cellpadding="2" cellspacing="0">
              <tr>
                  <td><font face="Calibri" size="2" color="#0552a7">our campuses...</font></td>
              </tr>
              <tr>
                <td align="right" valign="middle" width="*">
                <a...

CSS

body {
    background-color: #ffffff;

    /* for IE6 support*/
    behavior:url("code_snipets/csshover_ie.htc");    
}



/* pull-down mainmenu css code starts here*/
.mainmenu{
    float  : left;
    width  : 100%;
    height : 30;
    padding: 0;
    
    margin-bottom:0;
    margin-top:0;
    margin-left:0;
    margin-right:0;
    border-width:0;
    
    z-index:10;
    
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#e0e0e0;
    background: #333333;
    padding: 0;
    border: 0;
    border-width: 0;
    margin: 0;
    
    z-index:10;
}

.mainmenu a, .mainmenu a:visited {
    display: block;
    font-family:Verdana;
    font-size:13px;
    font-weight:normal;
    font-style:normal;
    text-decoration:underline;
    color: #e0e0e0;
    text-decoration: none;
    padding: 1em 1em;
    
    z-index: 10;
    
    
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}


.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
    
    background:url("../images/seperator.gif") bottom right no-repeat;
}

.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}
    
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em;    
    
    background: #333333;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}

.mainmenu li li {
    width:15em ;
}

.mainmenu li li a{
    width:13em ;
    background:url("../images/sun_seperator.gif") bottom left no-repeat;
}

.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left:...

JavaScript

//The Javascript has nothing to do with the CSS Menu
function MM_preloadImages()
{
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore()
{
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage()
{
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_findObj(n, d)
{
    var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
}
////////////////////
$(
   function()
   {
    $('ul#ullist').cycle(
                            {
                                fx:     'scrollHorz',
                                speed:  1000,
                                sync:   0,
                                prev:   '#prev',
                                next:   '#next',
                                height: 'auto',
                                cleartype:  1,
                                timeout: 10000
                                }
                        );
    }
);
//////////////
$(
   function()
   {
    $('ul#ullist2').cycle(
                            {
                                fx:     'fade',
                                speed:  3000,
                                sync:   0,
                                prev:   '#prev',
                                next:   '#next',
                               ...