JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html>
    <head>
    <title>RIP | Reduce Irresponsible Plastic</title>
    <link href="apes.css" rel="stylesheet" type="text/css">
    <meta name="keywords" content="gilroy, ca, christopher, high, school, apes, environmental, science, environment, plastic"/>
    <meta name="description" content="Reduce Irresponsible Plastic and the use of disposable plastic items in lunches."/>
    <meta name="geo.region" content="US-CA" />
    <meta name="geo.placename" content="Gilroy,CA" />
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="bag1.jpg"
    var image2=new Image()
    image2.src="bottle1.jpg"
    //-->
    </script>

    <script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}

if (window.addEventListener) {
  window.addEventListener('load', sfHover, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', sfHover);
}

//--><!]]>

</script>




    </head>
    <body background="webtreats_deep_water_blues_4 copy.jpg">



    <div id="wrap">

    <div id="header">
    <div id="head">
    <table border="1" width=1000px height=50px>
    <td>
    <img src="logp.png">
    <p id="smaller"><font id="big">R</font><font id="text">educe </font><font id="big">I</font><font id="text">rresponsible </font><font id="big">P</font><font id="text1">lastic</font>
    <p id="smaller2"><font id="top3"><i>Don't be a fool, reduce plastic at school</i></font>
    </td>
    </table>
    </div>  
    </div>

    <div style="width: 1000px;" onmouseover="document.getElementById('nav');">
    <div...

CSS

#nav {
clear:both;
    float:left;
   width:100%;
   margin:0;
   padding:0;
   position:relative;
    z-index:1000000;
    border-radius:10px;
    background-color: rgb(135, 206, 255);
background: linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);  
    background: -moz-linear-gradient(top, #FFFFFF 0%, #87CEFF 50%); 
    background: -webkit-linear-gradient(top, #FFFFFF 0%,#87CEFF 50%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#87CEFF');
        }

#nav ul {
    float:right;
   list-style:none;
   margin:0;
   padding: 0;
   position:relative;
   z-index:9999;
   right:50%;
   text-align:center;

}

#nav ul li {
   float:left;
   margin:0 0 0 0px;
   padding:0;
   position:relative;
   z-index:9999;
   list-style:none;
   left:50%;
top:1px;
width:160px; 
}

#nav li ul {
    position: absolute;
    display: none;
}

#nav li:hover ul,
#nav li.sfhover ul,
a:hover#nav li ul {
    display: block;
}


#nav ul li a {
display:block;
   margin:0;
   padding:.75em 0em .5em 0em;
       color:#000;
   text-decoration:none;
   line-height:1em;
        }



#nav ul li.active a {
   color:#87CEFF;
   }


#nav ul li a:hover,
#nav ul li a.sfhover
 {
   background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9...