JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head></head>
<body>
<div class="wrapper">
    <div class="header">header</div><!-- #header-->
    <div class="content">
        <div class="wrapper-center">
            <div class="content-bg">content-bg</div>
            <div class="content-item">content-item</div>
            <div class="content-item">content-item</div>
        </div>
    </div><!-- #content-->
</div><!-- #wrapper -->
<div class="footer">footer</div><!-- #footer -->
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    height: 100%;
    background: silver;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
}
.wrapper-center {
    width: 360px;
    margin: 0 auto;   
}
.header {
    height: 30px;
    background: green;
}
.content {
    padding: 0 0 40px;
}
.content-bg {
    position: absolute;
    top: 30px;
    bottom: 40px;
    width: 400px;
    margin-left: -20px;
    background: olive;
    z-index: -1;
}
.content-item {
    margin: 20px auto;
    background: lightblue;
}
.footer {
    margin: -40px auto 0;
    height: 40px;
    background: blue;
    position: relative;
}