JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parallax">
  <div class="parallax-group parallax-top">
    <div class="parallax-layer parallax-layer-base sea">
      <div class="title">Base Layer</div>
    </div>
  </div>
  <div class="parallax-group parallax-bottom">
    <div class="parallax-layer parallax-layer-base">
      <div class="title">Base Layer</div>
    </div>
    <div class="parallax-layer parallax-layer-back forest">
      <div class="title">Background Layer</div>
    </div>
  </div>
  <div class="parallax-group parallax-top">
    <div class="parallax-layer parallax-layer-base sea">
      <div class="title">Base Layer</div>
    </div>
  </div>
</div>

CSS

.parallax {
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;
  }

  .parallax-group {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
  }

  .parallax-layer-base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax-layer-back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }

  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .forest {
    background-color: #008800;
  }

  .sea {
    background-color: #000066;
    color: whitesmoke;
  }

  .parallax-top {
    z-index: 4;
  }

  .parallax-bottom {
    z-index: 3;
  }