JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>

</body>

CSS

body{
    margin:0;
    padding:0;
    width:1000px;
    height:550px;
}
#bubble{
    position:absolute;
    top:100px;
    left:100px;
    width:100px;
    height:100px;
    border:2px solid LightBlue;
    border-radius:50%;
    background: -webkit-radial-gradient(circle, White, LightBlue);
}
.window{
    position:absolute;
    top:15px;
    left:15px;
    width:20px;
    height:20px;
    border:2px solid white;
    border-radius: 20px 5px 20px 5px;
    background-color:white;
    
}

JavaScript

var item = 1;
$("body").mousedown(function(){
    
    function bubble(item){
          
        $("body").append('<div id="bubble'+item+'"></div>');
        $('#bubble'+item+'').append('<div class="window"></div>');
        
        var top = Math.floor((Math.random() * 600) + 1);
        var left = Math.floor((Math.random() * 900) + 1);
        
        $('#bubble'+item+'').css({
                    position:'absolute',
                    left: left + 'px',
                    top:  top + 'px',
                    width:'100px',
                    height:'100px',
                    border:'2px solid LightBlue',
                    borderRadius:'50%',
                    background:'-webkit-radial-gradient(circle, White, LightBlue)'
        });
        $( '#bubble'+item+'' ).delay( 3000 ).animate({
                                        top:'15px',
                                        
                                        height: '130px',
                                        width:'130px',
                                        opacity: 0.1

        }, 600, function (){
            $('#bubble'+item+'').remove();
        } );
        
    }
    item +=1;
    bubble(item);    
});


    





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