JSFiddle - React, Tailwind, and code Playground

by qustosh

JavaScript

$ = jQuery;
function ce(jqEl, center){
        var w = jqEl.width();
        var h = jqEl.height();
        center.l -= w/2;
        center.t -= h/2; 
        return center;
}
$("<div class='point'></div>").css({
                        "background-color": "black",
                        "position": "absolute",
                        "width":  2 + "px",
                        "height":  2 + "px",
                        "left": 50  + "px",
                        "top":  50 + "px"
}).appendTo($("body"));

var bp = $("<div class='bp'></div>").css({
                        "z-index": -1,
                        "background-color": "#bada55",
                        "position": "absolute",
                        "width":  20 + "px",
                        "height":  20 + "px"
})
  
var cent = ce(bp,{l:50,t:50});    
bp.css({
    "left": cent.l + "px",
    "top": cent.t + "px"
}).appendTo($("body"));

$(".bp").click(function(){
    console.log("hey there");
})