JSFiddle - React, Tailwind, and code Playground

HTML

<div id="CAPOTA">
<div id="capa-sombra">
<div id="CABECERA">CABECERA</div>
<div id="BOTONERA">BOTONERA</div>
<div id="LATERAL">
<p>LATERAL<br /> 
<span style="font-variant:normal; letter-spacing:normal; line-height:11px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); display:inline !important; float:none; font-family:arial, sans-serif; font-size:small; color:rgb(34, 34, 34); font-style:normal; font-weight:normal; ">Este comportamiento</span> <br /> 
<span style="font-variant:normal; letter-spacing:normal; line-height:11px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); display:inline !important; float:none; font-family:arial, sans-serif; font-size:small; color:rgb(34, 34, 34); font-style:normal; font-weight:normal; ">Este comportamiento</span> <br /> 

mal; font-weight:normal; ">Este comportamiento</span></div>
<div id="centro">CENTRO</div>
<div id="contenido">
<p>CONTENIDO</p>
<p>Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que est&aacute;n juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. As&iacute; me es m&aacute;s f&aacute;cil aplicarle luego los estilos y queda todo m&aacute;s recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crear&eacute; tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que est&aacute;n juntas...

CSS

img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#CAPOTA {
position:relative;
    left:-20px;
top:-10px;
width:850px;
height:100%;
background-color: #000000;
margin-left: auto;
margin-right: auto;
background-image: url(nuevaestructura2012/fondocapa.jpg);
}
#BOTONERA { 
left:0px;
top:150px;
width:850px;
height:24px;
background-color: #FFCC00;
}
#CABECERA { 
left:0px;
top:0px;
width:850px;
height:150px;
background-color: #CCCCCC;
}
#LATERAL {
left:0px;
top:175px;
width:200px;
height:100%;
background-color: #999900;
float: left;
}
#centro {
left:700px;
top:174px;
width:650px;
height:396px;
background-color: #FF0000;
float: right;
vertical-align: top;
}
#contenido {
left:200px;
top:573px;
width:650px;
height:100%;
background-color: #FF3366;
float: right;
}
#pie {
left:0px;
top:1023px;
width:100%;
height:40px;
background-color: #FFFF00;
clear: both;
}