JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="wrapper">
  <div class="layer layer-1"></div>
  <div class="layer layer-2"></div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

body, html {
 height: 100%;
}

.wrapper{
	width: 100%;
	height: 100%;
}

.layer-1,.layer-2{
	position: absolute;
}

.layer-1 {
	width: 100px;
  height: 50px;
	top: 20%; left: 30%;  
  background: red;
}

.layer-2 {
	width: 100px;
  height: 50px;
  top: 50%; left: 20%;   
  background: red;
}

JavaScript

$(window).on('mousemove',function(e) {

  var pageX = e.clientX,
      pageY = e.clientY;
        
	$('.layer').css({
  	'-webkit-transform' : 'translateX(' + pageX/10 + '%) translateY(' + pageY/10 + '%)',
  	'transform' : 'translateX(' + pageX/10 + '%) translateY(' + pageY/10 + '%)'
  });

});