JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="outer">
        <img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
    </div>
        <div class="frame">
    <img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
        </div>
    
    <div class="moreContent"></div>
    
</div>

CSS

.container {
    width: 100%;
    position: relative;
}
.frame {
    width: 600px;
    position: fixed; 
    z-index: -1;
    top: 0;
    left:0;
    right:0;
    margin:auto;
}
.frame img {
    width:600px;
       
}
.relative {
    position:relative;
}



.outer {
    width: 600px;
    margin:0 auto;
    height: auto;
    position: relative;
    margin-bottom:1000px;
    /* background: url(""); */
}
.no-margin {
    margin-bottom:0;
}
.outer img { width:100%;}
.moreContent {
    width:600px;
    margin:0 auto;
    height:800px;
    background-color:red;
}