JSFiddle - React, Tailwind, and code Playground

by marina

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" />
<title>Documento sin t&iacute;tulo</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="background">
<div id="header">
<img src="imag/p2pu.jpg" id="logo" />

<ul class="menu">
   <li>Learn</li>
   <li>People</li>
      <li>Schools<img src="imag/flecha.png" style=" position:static; padding-left:5px;"/>
        <ul>
         <li><span>school of Social Innovation</span></li><br/><br/>
         <li><span>school of the Mathematical Future</span></li><br/><br/>
         <li><span>school of Webcraft</span></li>
      </ul>
   </li>
   <li>Blog</li>
   <li>Help <img src="imag/flecha.png" style="position:static; padding-left:5px;"/>
      <ul>
         <li>una c</li><br/><br/>
         <li>una d</li>
      </ul>
   </li>
</ul>

</div>
</div>
</body>
</html>

CSS

html, body {margin:0; padding:0; width:100%; height:100%; text-align:left;
}
body {
background-color: #F4F4F4;
width:100%;
height:100%;
background-repeat:no-repeat;
z-index:-50;
top:0;
left:0;
margin:0;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

* {
font-family:Arial, Helvetica, sans-serif;}

a{
border:none;}

#background {
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    z-index:-150;
    margin:0;
    position:absolute;
    background-position:center center;
    background-attachment:fixed;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
    border:0;
}
#logo{
margin:0 auto;
float:left;}

#header {
height: 45px;
width:960px;
background-color:#FFFFFF;
border-style:solid;
border-width:1px;
border-color: #E8E8E8;
position: center center;
text-align:left;
margin:0px auto;
margin-top:50px;
z-index:0;
padding-left:10px;
padding-top:2px;
padding-bottom:2px;}

ul.menu
{
   list-style:none;
   float:left;
   position:relative;
   }
ul.menu li
{
   position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
   width:70px;
   padding:7px;
   padding-right:15px;
   background-color: #FFFFFF;
   margin-top:5px;
   margin-bottom:5px;
   color:#666666;
   }
   
ul.menu li:hover{
background-color: #91B7DD;
color:#FFFFFF;
}

ul.menu ul
{
   position: relative; /* Esta posición es relativa al <li> que contiene a este <ul> */
   top:200px;
   left:30px; /* Para que no monte sobre el <li> */
   list-style:none;
   font-size:12px;
   margin-top:20px;
   display: inline;
   width: 300px;
  }
ul.menu ul li{
background-color:#3C71D5;
color:#FFFFFF;
display:inline;
float:none;
}
ul.menu li:hover > ul
{
   display:block;
  ...