JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parallax">
        <div id="layer-back">
            <div id="back"></div>
        </div>  
        <div id="layer-base">
           <div id="inner-block">
               INBLOCK
           </div>
        </div>
    </div>

CSS

body, html, #parallax {
    overflow-x: hidden;
    overflow-y: auto;}
  
     #parallax {
    perspective: 1px;
    height: 100vh;}
  
     #layer-back {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;}
    
     #back {
    background: url(http://savepic.ru/15014059.jpg) no-repeat 50% 0;
    background-size: cover;
    top: 0;
    left: -9px !important;
    position: absolute;
    right: 9px !important;
    bottom: 0; 
    transform: translateZ(-1px) scale(2);}
  
     #layer-base {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
    background: url(http://savepic.ru/15022251.jpg) repeat-y 50% 0;
    background-size: cover;}
    
    #inner-block {
      position: absolute;
      height: 50vh;
      width: 50vw;
      
      background: url(http://savepic.ru/15022251.jpg) repeat-y 50% 0;
      background-size: cover;
      
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
        border-radius: 5px;

-webkit-box-shadow: 0px 0px 25px -1px rgba(255,255,255,1);
      -moz-box-shadow: 0px 0px 25px -1px rgba(255,255,255,1);
      box-shadow: 0px 0px 25px -1px rgba(255,255,255,1);
      left:25vw;
      top:25vh;
    }