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>");
        mousePos();
    }
    var pageX;
    var pageY;

    function mousePos() {
        $(window).mousemove(function (e) {
            pageX = e.pageX;
            pageY = e.pageY;
        });

        moveBg();
    }
    /*var limitX = 5000;
    var limitY = 5000;*/
    function moveBg() {
        var mouseX = 0;
        var mouseY = 0;
        var limitX = 500;
        var limitY = 500;
        var stage = $("#main");
        var position = stage.position();

        stage.mousemove(function (e) {
            mouseX = Math.min(e.pageX - position['left'], limitX);
            mouseY = Math.min(e.pageY - position['top'], limitY);
        });

        // cache the selector
        var follower =...