JSFiddle - React, Tailwind, and code Playground

by nottrobin

HTML

<div class="article squeeze">
    <p>This example uses <code>width: 500px</code> to make it clear in jsfiddle, where in your example it would be <code>width: 920px</code>.</p>
    <div class="push"></div>
</div>

<div class="footer"> 
    <div class="squeeze">
        Home
    </div>
</div>

CSS

* { margin: 0; }
html, body { height: 100%; }
body {
    background-color: green;
    padding: 0; /* You shouldn't need this when not in an iframe */
}
.squeeze {
    padding: 0 10px;
    width: 500px; /* In your page this would actually be 920px */
    margin: 0 auto;
}
p {
    padding: 10px 0;
}
.article {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background-color: white;
    margin-bottom: -70px; /* the bottom margin is the negative value of the footer's height */
    /* Shadows won't work in IE < 9 */
    -moz-box-shadow: 0 0 15px 3px #000;
    -webkit-box-shadow: 0 0 15px 3px #000;
    box-shadow: 0 0 15px 3px #000;
}
.push {height: 90px;}
.footer {
    height: 50px;
    padding: 10px 0;
    -moz-box-shadow: 0 0 15px 3px #000;
    -webkit-box-shadow: 0 0 15px 3px #000;
    box-shadow: 0 0 15px 3px #000;
    background-color: blue;
    color: white;
}
.footer .squeeze {position: relative;}
.footer .squeeze:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    height: 20px;
    width: 520px;
    background-color: white;
}