JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parallax parallax-group">
  <div class="parallax-layer1 orange">

  </div>
  <div class="parallax-layer2 yellow">
    adsfadf
    <br />adsfadf
    <br />adsfadf
    <br />adsfadf
    <br />adsfadf
    <br />adsfadf
    <br />adsfadf
    <br />
  </div>
</div>

SCSS

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.parallax {
  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: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

[class^=parallax-layer] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform-origin-x: 100%;
  transform-origin-x: 100%;
}

.parallax-layer1 {
  -webkit-transform: translate3d(0, 0, -300px) scale(2);
  transform: translate3d(0, 0, -300px) scale(2);
  z-index: 1;
}

.parallax-layer2 {
  -webkit-transform: translate3d(0, 160vh, -100px) scale(2);
  z-index: 2;
}