JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">
        <div class="rotation"></div>
        <div class="content">HEADER</div>
    </div >
    
    <div id="content">
        CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br />
        CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br />
        CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br />
        CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br /> CONTENT<br />
    </div>    
    
    <div id="footer">
        <div class="rotation"></div>
        <div class="content">FOOTER</div>
    </div >
</div>

CSS

#wrapper {
    width: 100% ;
    height: 100% ;
    padding-top: 60px ;
    padding-bottom: 40px ;
}

#header,
#footer {
    position: fixed ;
    left: 0 ;
    width: 100% ;
    overflow: hidden ;
    z-index: 1 ;
}

#header {
    top: 0 ;
    height: 50px ;
    border-bottom: 1px solid #CACACA ;
}

#footer {
    bottom: 0 ;
    height: 30px ;
    border-top: 1px solid #CACACA ;
}

#content {
    overflow: auto;
    z-index: 0 ;
}

.rotation {
    position: absolute ;
    left: 0px ;
    top: -100px ;
    width: 120% ;
    height: 300px ;   
    background-image: url( 'http://tinyurl.com/c9vtlz2' ) ;
    image-rendering:optimizeQuality;

    -webkit-transform: rotate( 5deg ) ;
    -moz-transform: rotate( 5deg ) ;
    -ms-transform: rotate( 5deg ) ;
    -o-transform: rotate( 5deg ) ;
    transform: rotate( 5deg ) ;
}

.content {
    position: absolute ;
    top: 0px ;
    left: 0px ;
    width: 100% ;
    height: 100% ;
}

.content:hover {
    background-color: lightgreen ;
}