JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<div id="canvas">
    <div class="line1">
        <span class="pos"></span>
    </div>

    <div class="line2">
        <span class="pos"></span>
    </div>
</div>

CSS

#canvas {width: 500px;height: 500px; cursor: crosshair; }
    .line1 { height: 0px; width: 100%; border-top: 1px cyan solid;position:absolute}
    .line2 { width: 0px; height:100%; border-right: 1px cyan solid;position:absolute}

.pos {position:absolute;width: 100px;font-size: 12px;display:none}

JavaScript

$(document).ready(function(){

    $('#canvas').mousemove(function(e){
        $('.line1').css('top', e.pageY);
        $('.line2').css('left', e.pageX);
    });           
    
});