JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<h1>You can draw a rectangle shape anywhere on the page</h1>

CSS

a {
    text-decoration:none;
    color:#0075FF;
    z-index:1;
}
a div {
    display:none;
    position: absolute;
    margin-top:105px;
    margin-left:133px;
}
a:hover div {
    display:block;
}
.tip {
    padding:10px;
    position:absolute;
    top:0%;
    left:0%;
    width:300px;
    height:300px;
    margin-left:0px;
    margin-top:0px;
    text-align:center;
    opacity:0.8;
    filter:alpha(opacity=80);
}
.tip .body {
    color: #0075FF;
    background-color: #B5FF00;
    padding:5px 5px 5px 5px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

JavaScript

var x1, x2, y1, y2;

$(document).mousedown(function (e) {

    $("#current").attr({
        id: ''
    })

    box = $('<div style="border:1px #FF00FF solid;position:fixed;">').hide();

    $(document.body).append(box);



    x1 = e.pageX;

    y1 = e.pageY;



    box.attr({
        id: 'current'
    }).css({

        top: e.pageY, //offsets
        left: e.pageX //offsets

    }).fadeIn();

});

$(document).mousemove(function (e) {

    $("#current").css({

        width: Math.abs(e.pageX - x1), //offsets
        height: Math.abs(e.pageY - y1) //offsets

    }).fadeIn();

});



$(document).mouseup(function () {

    $("#current").attr({
        id: ''
    })

});