JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <!--inicia menu principal-->
        <div id="menu_top">
            <a href="index.html"> <div id="logo"></div></a>
            <div id="menu_desplegable">
                <ul id="nav">
                    <li><a href="espanol/La_empresa.html">NOSOTROS</a></li>
                    <li><a class="hsubs" href="espanol/La_villa_instalaciones.html"> RAFTING Y ACTIVIDADES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/villaecoturistica_instalaciones.html">INSTALACIONES</a></li>
                            <li><a class="sub" href="espanol/programas_rafting_rios.html">PROGRAMAS</a></li>
                            <li><a class="sub" href="espanol/villaecoturistica_actividades.html">ACTIVIDADES</a></li>
                            <li><a class="sub" href="espanol/villaecoturistica_mapa.html">MAPA DE UBICACI&Oacute;N</a></li>
                        </ul>
                    </li>
                    <li><a class="hsubs" href="espanol/servicios_viajes_escolares.html">VIAJES ESCOLARES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/campamento_escolar.html">CAMPAMENTO ESCOLAR</a></li>
                            <li><a class="sub" href="espanol/dinosaurios.html">DINOSAURIOS</a></li>
                            <li><a class="sub"href="espanol/selva_lacandona.html">SELVA LA CANDONA</a></li>
                            <li><a class="sub" href="espanol/cuetzalan.html">CUETZALAN</a></li>
                            <li><a class="sub" href="espanol/cofre_de_perote.html">COFRE DE PEROTE</a></li>
                            <li><a class="sub" href="espanol/catemaco.html">CATEMACO</a></li>
                            <li><a class="sub" href="espanol/campamento_integracion.html">INTEGRACI&Oacute;N PARA PROFESORES Y EGRESADOS</a></li>
                            <li><a class="sub" href="espanol/diplomado_turismo.html">DIPLOMADO "TURISMO DE...

CSS

/* Links */
a {	font-family: 'Merriweather Sans', sans-serif;
font-size:13px;
color:#fff;
text-align:center;
font-weight:400;
text-decoration:none;
alignment-baseline:central;
alignment-adjust:central;}

a:hover {
font-family: 'Merriweather Sans', sans-serif;
font-size:13px;
color:#fff; text-align:center;
font-weight:400;alignment-baseline:central; alignment-adjust:central;}
		
header{position:relative;
	magin:0 auto;
	display:block;
	padding:0 0 0 0; 
	background-image:url(espanol/images/index/barra_menu.png);
	height:92px;
	width:100%;
	z-index:5;
	}


footer{padding:0 0 0 0; 
width:100%;
margin: 0 auto;
background-image:url(espanol/images/index/barra_inferior_02.png);
position:relative;
height:59px;
bottom:0px;
}

body,div,ul,ol,li{ margin:0; padding:0;}
html,body { margin:0; padding:0; width:100%; height::100%}
			
			/* Contenido */
#contenido {
position: relative;
width: 980px;
height: 100%;
z-index: 50;
margin: 0 auto;;
padding:0 0 0 0}
			

			/* Menu */

#menu_top{
	height: 92px;
	width: 980px;
	position: relative;
	left: 0px;
	top: 0px;
	margin: 0 auto;
	padding: 0 0 0 0;
}

#menu_desplegable{ height: 91px;
width: 752px;
position: absolute;
left: 225px;
top: 0px;}


#logo {
position: absolute;
width: 210px;
height: 64px;
top: 20px;
background-image:url(espanol/images/index/logotipo.png);
left: 6px;
}


#footer {
					position: relative;
					height: 59px;
					width: 980px;
					bottom: 0px;
					margin: 0 auto;
				}
				
				#aviso {
	position: absolute;
	height: 40px;
	width: 598px;
	top: 10px;
	left: 16px;
				}
				
				#redes {
	position: absolute;
	height: 46px;
	width: 309px;
	left: 640px;
	top: 9px;
				}
			
			/* Estilo de tabla footer */
				td.footer{
					font-family: 'Merriweather Sans', sans-serif;
					font-size:13px;
					color:#fff; text-align:center;
					font-weight:400;
					alignment-adjust:central;
					line-height:16px;}


			/* Fondo */
				#page{ position:static; z-index:1;}
			
			
			/* Banner */
				#banner{
	height:...