JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>
    <div id="bubble">
        <div class="shape">
            <div class="window"></div>
        </div>
    </div>    
    <p>kolo</p>
</body>

CSS

body{
    margin:0;
    padding:0;
}
#bubble{
    position:absolute;
    top: 100px;
    left: 100px;
    width:100px;
    height:100px;
    
}
.shape{
    position:relative;
    top: 0px;
    left: 0px;
    width:100px;
    height:100px;
    border: 3px solid blue;
    background-color:LightBlue;
    border-radius:50%;
    opacity:0.5;
}

.addShape{
    position:fixed;
    width:100px;
    height:100px;
    border: 3px solid blue;
    background-color:LightBlue;
    border-radius:50%;
    opacity:0.5;
}

.window{
    position:relative;
    top: 15px;
    left: 15px;
    width:25px;
    height:25px;
    border: 1px solid white;
    background-color:white;
    border-radius:25px 10px 10px 10px;
}

.addWindow{
    position:relative;
    top: 15px;
    left: 15px;
    width:25px;
    height:25px;
    border: 1px solid white;
    background-color:white;
    border-radius:25px 10px 10px 10px;
}

JavaScript

var scale = (Math.random() * 3)+1;
var i = 1;


$(document).on('mousemove', function(move) {
    moveX = move.clientX;
    moveY = move.clientY;
    i += 1;
    
    $("#bubble").css({
        left: moveX + 'px',
        top:  moveY + 'px',
    });
    
    $("p").replaceWith("<p>" + moveX + "," + moveY +"</p>");
});

$("body").on("click",function(){
    var index = 'bubble' + i +'';
    //alert(index);
    var bubble = '<div id='+index+'></div>' ;
    
    $("body").append(bubble);
    $('#'+index+'').addClass('addShape');
    $('#'+index+'').css({
                left: moveX + 'px',
                top:  moveY + 'px',
                

    });
});