JSFiddle - React, Tailwind, and code Playground

by RomanFF

HTML

<div class="flex">
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
</div>
<div class="second"></div>
<p></p>

CSS

.flex{
  display: flex;
  justify-content: space-between;
}
.first{
  background-color: red;
  width: 100px;
  height: 100px;
}

JavaScript

let p = document.querySelector('p');

window.addEventListener('mousemove', coordinate);
window.addEventListener('click', showBox);

function showBox(e) {
  if (e.target.className == 'first') {
    let second = document.querySelector('.second');
    console.log(second)
    second.style.position = 'absolute';
    second.style.left = (e.clientX-50) + 'px';
    second.style.top = (e.clientY - 50) + 'px';
    second.style.backgroundColor = 'blue';
    second.style.width = '100px';
    second.style.height = '100px';
    
  }
}


function coordinate(e) {
  p.innerHTML = e.clientX + ':' + e.clientY;
}