JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

/*body {
  padding-top: 400px;
  padding-bottom: 400px;
}*/

/*.wrapper {
  height: 1083px;
  overflow: hidden;
}*/

/*.container {
   height: 1083px;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.page-content {
  position: absolute; 
  top: 140px;
  overflow: scroll;
  left: 66px;
  z-index: -100;
}*/
.container {
    width: 70%;
    position: relative;
}
.frame {
    z-index: 100;
}
 .outer {
    width: 600px;
    height: 600px;
    overflow: scroll;
    position: absolute; 
    z-index: 1;
    top: 0;
    /* background: url(""); */
}
.outer img {
    margin: 0 auto;
}