JSFiddle - React, Tailwind, and code Playground

by Sahin Deniz

HTML

<div class="test"></div>

CSS

.test {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100px;
  height: 1px;
  padding: 0px;
  background-color: blue;
  transform: translate(381px, 324px);
  pointer-events: none;
  z-index: 2147483647;
}

JavaScript

let startElement;

window.addEventListener('mousedown', () => {
	
});
/*['mousedown', 'mouseup'].forEach((eventKey) => {
  window.addEventListener(eventKey, ({
    clientX,
    clientY,
    buttons,
    type
  }) => {
    if (type !== 'mousemove' || buttons) {
      console.log(clientX, clientY);
      document.body.insertAdjacentHTML('beforeend', `<div style="position: absolute;left: ${type === 'mousemove' ? '0' : '-5'}px;top: ${type === 'mousemove' ? '0' : '-5'}px;outline: 1px solid red;width: 1px;height: 1px;padding: ${type === 'mousemove' ? '0' : '5'}px;transform: translate(${clientX}px, ${clientY}px);border-radius: 50%;pointer-events: none;z-index:2147483647;"></div>`);
    }
  })
});*/