JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "container" class = "container">
    Click ME!!
     </div>
<div class = "result"></div>
<div class = "result1"></div>

CSS

.container{
    width:400px;
    height:350px;
    background:silver;
text-align:center;
}
.result{
    width:400px;
    height:30px;
    background:#ccc;
    color:purple;
   }
.result1{
    width:400px;
    height:30px;
    background:#ccc;
    color:purple;
   
}
#square, #blacksquare{
    width:20px;
    height:20px;
    background:#D0E69C;
}
#blacksquare {
    background:black !important;
    display:none;
}
.block {
    height:5px;
    width:5px;
    background:yellow;
    margin:10px;
    position:absolute;
}
#fly1{
    top:10px
}
#fly2{
    top:20px
}
#fly3{
    top:30px
}
#fly4{
    bottom:70px
}
#fly5{
    bottom:50px
}

JavaScript

var container = document.getElementById('container');
$('div.container').on('click',function(event){
   
  $('div.result').html("X:"+event.pageX+" Y:"+event.pageY); 
       });