JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<div id="layer01">
    <div id="headerBG">headerBG</div>
</div>

<div id="layer02">
    <div id="header">header</div>
    <div id="content">
         <div id="contentTop">contentTop</div>
         <div id="contentCenter">contentCenter</div>
    </div>
    <div id="footerBG">
        <div id="footer">footer</div>
    </div>
</div>

CSS

body           {background:#eeeeee; position:relative;}

#layer01       {width:100%; position:absolute; top:0; left:0;}
#headerBG      {width:100%; background:#990000; height:40px;}

#layer02       {position:absolute; top:0; left:0; width:100%;}
#header        {margin:0 auto; height:40px; width:500px; background:#ffffff;}
#content       {min-height:300px; width:500px; margin:0 auto; background:#00ff00;}
#contentTop    {width:100%; background:#0099ff;}
#contentCenter {width:100%; background:#99ff00;}
#footerBG      {width:100%; height:40px; background:#666666;}
#footer        {margin:0 auto; width:500px; height:40px; background:#cccccc;}