JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<div id="bg1" class="bg">top</div>
    <div id="content">
        help me. seriously.
    </div>
<div id="bg2" class="bg">bottom</div>

CSS

html, body {
    width:100%;
    height:100%;
}

.bg {
    width:315px;
    height:23px;
    margin:0 auto;
    text-indent:9000px;
}

#bg1 {background:url(http://placehold.it/200x300) 0 50% no-repeat;}
#bg2 {background:url(http://placehold.it/200x300) 0 50% no-repeat;}

#content {
    width:450px; 
    margin:0 auto;
    text-align: center;
    border: 1px solid blue;
}

JavaScript

$(window).resize(function() {
    $('#content').height($(window).height() - 46);
});

$(window).trigger('resize');