JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="container">
  <div class="target"></div>
</div>

CSS

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.target {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  display: none; /* On cache l'élément au début */
}

.mouse-class {
  background-color: red !important;
}

Babel + JSX

$(document).ready(function() {
  $(document).mousemove(function(event) {
    $('.target').addClass('mouse-class').css({
      top: event.pageY + 'px',
      left: event.pageX + 'px',
      display: 'block' // Affiche l'élément
    });
  });
});