JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<div id="header">
    <div class="page">
        <div id="logo">
            <h1><img alt="" src="http://stpo.free.fr/temp/stpo-v4/img/lg_stpo.png" /></h1>
        </div>
        <p>test<p>
        <p>test<p>
    </div>
</div>
<div id="content">
    <div class="page">
        <p>test<p>
        <p>test<p>
        <p>test<p>
    </div>
</div>
<div id="footer">
    <div class="page">
        <p>test<p>
        <p>test<p>
    </div>
</div>

CSS

body
{
    background: url(http://stpo.free.fr/temp/stpo-v4/img/bg_body.png) 50% 0 repeat-y;
}
.page
{
    padding-left: 300px;
    width: 840px;
    margin: 0 auto;
    background-color: rgba(0,256,256,0.5);
}
#header,
#footer
{
    padding: 1.5em 0;
}
#content
{
    background-color: rgba(256,256,256,0.5);
}
#header .page
{
    position: relative;
}
#logo
{
    position: absolute;
    left: 0;
    top: 0;
}