JSFiddle - React, Tailwind, and code Playground

by 7_Paul_21

HTML

<div class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer parallax__layer--back">
 dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
    </div>
    <div class="parallax__layer parallax__layer--base">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
    </div>
  </div>
  <div class="parallax__group">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd
  </div>
</div>

CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}