JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
  <div id="nestedBox1">
  
  </div>
</div>

CSS

#box1 {
  width: 500px;
  height: 500px;
  background: red;
  transform: translate(0px, 0px) scale(0.75);
}

#nestedBox1 {
  width: 200px;
  height: 200px;
  background: green;
  /* transform: translate(300px, 0px); */
}

* {
  padding: 0;
  margin: 0;
}

JavaScript

const nestedBox1 = document.getElementById("nestedBox1")
const box1 = document.getElementById('box1')

const scale = 0.75

box1.addEventListener('mousemove', (e) => {
	console.log("x",e.clientX)
	console.log("y", e.clientY)
	  nestedBox1.style.transform = `translate(${(e.clientX + 66)}px, ${e.clientY}px)`
})

/* console.log("x",e.clientX)
	console.log("y", e.clientY)
	  console.log("nested box", nestedBox1)*/