JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/perspective.js/lib/perspective.js"></script>

<div class="wrap" id="wrap">
  <div class="container" id="container1" data-scroll-stage-id="basic">
    <div class="div1" data-scroll-item-id="backstage"></div>
    <div class="div2" data-scroll-item-id="middlestage"></div>
    <div class="div3" data-scroll-item-id="frontstage"></div>
    <p>GOOD OLD PARALLAX EFFECT</p>
  </div>
  <div class="container" id="container2" data-scroll-stage-id="color">
    <div class="battery">
      <div class="div1" data-scroll-item-id="battery"></div>
    </div>
    <p data-scroll-item-id="text">CHARGE BATTERIES</p>
  </div>
  <div class="container" id="container4" data-scroll-stage-id="transform">
    <div class="showcase" data-scroll-item-id="showcase">
      <p>ROTATE</p>
      <p>TILL</p>
      <p>YOU</p>
      <p>SEE</p>
      <p>THE</p>
      <p>END</p>
      <p>OF</p>
      <p>THIS</p>
      <p>SENTENCE</p>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: monospace,sans-serif;
}

.wrap {
  height: 100%;
  width: 100%;
  position: relative;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.container * {
  position: absolute;
}

p {
  font-size: 40px;
  font-weight: bold;
  color: #509b35;
  cursor: default;
}

#container1 {
  background-color: #fffaf1;
}

#container1 .div1 {
  height: 200%;
  width: 100%;
  background: url('https://raw.githubusercontent.com/Leopoldthecoder/Perspective/master/docs/examples/assets/backstage.png') 0 0 repeat;
}

#container1 .div2 {
  height: 200%;
  width: 100%;
  background: url('https://raw.githubusercontent.com/Leopoldthecoder/Perspective/master/docs/examples/assets/middlestage.png') 0 0 repeat;
  z-index: 1;
}

#container1 .div3 {
  height: 200%;
  width: 100%;
  background: url('https://raw.githubusercontent.com/Leopoldthecoder/Perspective/master/docs/examples/assets/frontstage.png') 0 0 repeat;
  z-index: 1;
}

#container1 p {
  top: 40%;
  font-size: 40px;
  width: 100%;
  text-align: center;
}

#container2 {
  background-color: #fffaf1;
}

#container2 .battery {
  width: 300px;
  height: 150px;
  background-color: transparent;
  border-radius: 20px;
  border: solid 5px #666;
  padding: 20px;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(-80%);
}

#container2 .battery::after {
  content: " ";
  width: 13px;
  height: 50px;
  border-radius: 4px;
  position: absolute;
  right: -13px;
  top: 45px;
  background-color: #666;
}

#container2 .div1 {
  height: 100px;
  width: 125px;
  border-radius: 10px;
  background-color: #fd0;
}

#container2 p {
  text-align: center;
  width: 100%;
  color: #209b35;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%);
}

#container4 {
  perspective: 150px;
  background-color: #fffaf1;
}

#container4 .showcase {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
 ...

JavaScript

new perspective.Scroll('.wrap', {
  stages: [{
    "id": "basic",
    "scrollNumber": 120,
    "transition": 0,
    "easing": "linear",
    "items": [{
      "id": "backstage",
      "effects": [{
        "property": "transform",
        "start": "translateY(0px)",
        "end": "translateY(-100px)"
      }]
    }, {
      "id": "middlestage",
      "effects": [{
        "property": "transform",
        "start": "translateY(0px)",
        "end": "translateY(-180px)"
      }]
    }, {
      "id": "frontstage",
      "effects": [{
        "property": "transform",
        "start": "translateY(0px)",
        "end": "translateY(-700px)"
      }]
    }]
  }, {
    "id": "color",
    "scrollNumber": 7,
    "transition": 200,
    "items": [{
      "id": "battery",
      "effects": [{
        "property": "width",
        "start": "125px",
        "end": "250px"
      }, {
        "property": "backgroundColor",
        "start": "#fd0",
        "end": "#209b35"
      }]
    }, {
      "id": "text",
      "effects": [{
        "property": "color",
        "start": "#fd0",
        "end": "#209b35"
      }]
    }]
  }, {
    "id": "transform",
    "scrollNumber": 8,
    "transition": 500,
    "items": [{
      "id": "showcase",
      "effects": [{
        "property": "transform",
        "start": "rotateX(0deg)",
        "end": "rotateX(320deg)"
      }]
    }]
  }]
})