JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cursor" class="cursor"></div>

JavaScript

var count = 1;

f(); //call function
f();

function f(){
    //************create div************
    var div = document.createElement("div");
    div.id="div"+count;
    div.style.width = "300px";
    div.style.height ="300px";
    div.style.border = "1px solid #000";
    div.style.background = "red";
    div.style.cssFloat="left";
    //div.style.padding="10px 10px";
    //div.style.position = "absolute";
    document.body.appendChild(div);
    
        

    
    //************create div mouse vertical ************
    var div_v = document.createElement("div");
    div_v.style.position = "absolute";
    div_v.style.borderLeft = " 1px solid black";
    div_v.style.height = "300px";
    div_v.className="cursor-v"+count;
    
    //************create div mousse horizontal ************
    var div_h = document.createElement("div");
    div_h.style.position = "absolute";
    div_h.style.borderTop = " 1px solid black";
    div_h.style.width = "300px";
    div_h.className="cursor-h"+count;
    
    document.getElementById("cursor").appendChild(div_h);
    
    document.getElementById("cursor").appendChild(div_v);
    
    
    var v = document.querySelector('.cursor-v'+count);
    var h = document.querySelector('.cursor-h'+count);
    var elBox = document.querySelector('.cursor').getBoundingClientRect();
    
    window.onmousemove = function(e) {
        var mouseX = e.clientX - elBox.left;
        var mouseY = e.clientY - elBox.top;
        
        h.style.top = mouseY + 'px';
        v.style.left = mouseX + 'px';
        v.style.visibility = "visible";
        h.style.visibility = "visible";
        
        //if(mouseX>300 || mouseY>300){
            //v.style.visibility = "hidden";
            //h.style.visibility = "hidden";
        //}
        
       
    };
count++;
}