JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrappen">
  <div class="block1"> </div>
  <div class="block2"> </div>
  <div class="block3"> </div>
  <div class="block4"></div>  
</div>


<!-- bl1 x -14/14   y -13/12 -->
<!-- bl2 x -24/24   y -23/22 -->
<!-- bl3 x -34/34   y -33/32 -->
<!-- bl4 x -54/54   y -53/52 -->

CSS

.wrappen {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 0 auto;
}

.block1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -75px;
  margin-top: -75px;
  background: red;
  width: 150px;
  height: 150px;
}

.block2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background: gold;
  width: 100px;
  height: 100px;
}

.block3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: pink;
  width: 80px;
  height: 80px;
}

.block4 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  background: green;
  width: 40px;
  height: 40px;
}

JavaScript

var bl1 = $(".block1"),
  bl2 = $(".block2"),
  bl3 = $(".block3"),
  bl4 = $(".block4");

var doc = {
  w: $(window).width(),
  h: $(window).height(),
  wC: $(window).width() / 2,
  hC: $(window).height() / 2
};
var mouse = {
  x: 0,
  y: 0
};

$(window).resize(function() {
  doc = {
    w: $(window).width(),
    h: $(window).height(),
    wC: $(window).width() / 2,
    hC: $(window).height() / 2
  }
});

$(window).mousemove(function(e) {
  mouse.x = ((e.pageX - doc.w + doc.wC) / (doc.wC / 50));
  mouse.y = ((e.pageY - doc.h + doc.hC) / (doc.hC / 50));

  bl1.css('transform', 'translate(' + mouse.x + 'px, ' + mouse.y + 'px)');

});