JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section">
  <div style="top: 100px; left: 46.3%;" data-px-per-scroll="0.5" data-initial-position="100" class="l-parallax_item"></div>
  <div style="top: 300px; left: 37.7%;" data-px-per-scroll="0.9" data-initial-position="300" class="l-parallax_item"></div>
  <div style="top: 80px; left: 56%;" data-px-per-scroll="0.3" data-initial-position="80" class="l-parallax_item"></div>
  <div style="top: 230px; left: 75%;"  data-px-per-scroll="0.8" data-initial-position="230"  class="l-parallax_item"></div>
  <div style="top: 60px;left: 7.1%;" data-px-per-scroll="0.5" data-initial-position="60" class="l-parallax_item"></div>
</div>

CSS

body {
  height: 4000px;
  background: grey;
}

.section {
  height: 400px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: black;
}

.l-parallax_item {
  background: white;
  height: 60px;
  width: 60px;
  border-radius: 6px;
  position: fixed;
}

JavaScript

function parallaxBlocks(){
  let parallaxElements = document.getElementsByClassName("l-parallax_item");
  let st = window.pageYOffset || document.documentElement.scrollTop; 
  let elementsLength = parallaxElements.length;

   for(i = 0; i < elementsLength; i++) {

    let movePx = 1 + parseFloat(parallaxElements[i].dataset["pxPerScroll"]);
    let position = 1 + parseInt(parallaxElements[i].dataset["initialPosition"]);
    parallaxElements[i].style.top = Math.floor(position - (st * movePx)) + 'px';

   }
}

window.addEventListener('scroll', parallaxBlocks)