JSFiddle - React, Tailwind, and code Playground

by ajayogal

HTML

<div id="content"></div>

CSS

#content{margin: auto; clear: both; width: 300px; height: 300px;}
.button1{cursor:pointer;}
span{position:absolute;}

JavaScript

$(document.body).on('mousemove',function(e){
    id = 'a'+e.pageX + e.pageY;
    background  = 'rgb('+ (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +')';
                             
    $('body').append("<span id='"+id+"'></span>");
    $("#"+id).css('background',background).css('height','10px').css('width','10px').css('display','block').offset({left:e.pageX,top:e.pageY});

});


$(document.body).on('click',function(e){
	id = 'a'+e.pageX + e.pageY;
    alert(id);
    background  = 'rgb('+ (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +')';
    $('body').append("<span id='"+id+"'></span>");
    $("#"+id).css('background',background).css('height','10px').css('width','10px').css('display','block').offset({left:e.pageX,top:e.pageY});
});