JSFiddle - React, Tailwind, and code Playground

by lottikarotti

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 />
        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-bottom: 35px ;
}

#header,
#footer {
    width: 100% ;
    overflow: hidden ;
}

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

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

#content {
    overflow: auto;
}

.rotation {
    position: relative ;
    top: -150px ;
    left: 0 ;
    width: 120% ;
    height: 300px ;   
    background-image: url( 'http://tinyurl.com/c9vtlz2' ) ;
    
    -webkit-transform: rotate( 5deg ) ;
    -moz-transform: rotate( 5deg ) ;
    -ms-transform: rotate( 5deg ) ;
    -o-transform: rotate( 5deg ) ;
    transform: rotate( 5deg ) ;
}

.content {
    position: relative ;
    top: -300px ;
    width: 100% ;
}

#header .content {
    height: 50px ;
}

#footer .content {
    height: 30px ;
}