JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="example_div"></div>
    <div id="brick"></div>
    <div class="container">
        <div id="NW"></div>
        <div id="NE"></div>
        <div id="SW"></div>
        <div id="SE"></div>
    </div>

CSS

#brick {
  position: fixed;
  width: 52px;
  height: 52px;
  background: #000;
  z-index: 1;
  transition: border-radius 1s;
}

.circle {
  border-radius: 50%;
}

#NW {
  position: fixed;
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  background: orange;
}

#NE {
  position: fixed;
  width: 50%;
  height: 50%;
  top: 0;
  left: 50%;
  background: blue;
}

#SW {
  position: fixed;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 0;
  background: green;
}

#SE {
  position: fixed;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  background: red;
}

JavaScript

var brick;
function imouse() {
  if (!brick) brick = document.getElementById('brick');
  brick.style.left = event.x + 'px';
  brick.style.top = event.y + 'px';
  brick.classList[
    ((event.x > window.innerWidth / 2 && event.y < window.innerHeight / 2) ||
     (event.x < window.innerWidth / 2 && event.y > window.innerHeight / 2)) ?
    `add` : `remove`
  ](`circle`);
}
document.onmousemove = imouse;