JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="main" class="main no_selection"></div>
<div id="myCircle" class="myCircle no_selection"></div>

CSS

body {
    overflow: hidden;
}
.no_selection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}
.main {
    overflow: hidden;
    margin: 0 auto;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    background-color: #e7e7e7;
}
.circle {
    text-align: center;
    position: absolute;
}

JavaScript

$(function () {
    /*function drawCircle(size) {
        var circleSize = size;
        if (circleSize === "small") {
            circleSize = 10;
        } else if (circleSize === "medium") {
            circleSize = 50;
        }
        if (typeof (circleSize) === "number") {
            $("#main").append("<div class=\"circle\" style=\"" +
                "width:" + circleSize + "px;" +
                "height:" + circleSize + "px;" +
                "line-height:" + circleSize + "px;" +
                "background-color:red;" +
                "top:" + circleSize + "px;" +
                "left:" + circleSize + "px;" +
                "border-radius:" + circleSize + "px;" +
                "\">test</div>");
        }
    }*/
    function addMyCircle(size) {
        $("#myCircle").append("<div class=\"circle\" style=\"" +
            "width:" + size + "px;" +
            "height:" + size + "px;" +
            "line-height:" + size + "px;" +
            "background-color:red;" +
            "top:50%;" +
            "left:50%;" +
            "border-radius:" + size + "px;" +
            "text-align: center;" +
            "margin-top: -" + size / 2 + "px;" +
            "margin-left: -" + size / 2 + "px;" +
            "position: fixed;" +
            "\">i</div>");
        moveBg();
    }

    function moveBg() {
        window.setTimeout(function(){console.log("test");moveBg()}, 500);
        //$("#main").var limitX = 5000, limitY= 5000;
        /*$(window).mousemove(function(e){
            
  var offset = $('#main').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});*/
        
    }
    addMyCircle(30);
    //drawCircle("medium");
});