JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div class="outer">
    <div class="ripple"></div>
</div>

CSS

body{
    padding:0px;
    margin:0px;
    width:100%;
    height:400px;
    display:block;
}
.outer{
    -webkit-animation-duration:1s;
    -webkit-animation-name : neon;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count:1;
}
.ripple{
    top: 200px;
    left: 200px;
    height: 30px;
    width: 30px;
    border: 1px solid black;
    position: absolute;
    z-index: 100000000000;
    -webkit-border-radius: 50%;
    float: left;
    display:none;
}

@-webkit-keyframes neon{
    0%{
        width:30px;height:30px;
    }
    50%{
        width:40px;height:40px;
    }
    100%{
        width:50px;height:50px;
    }
}

JavaScript

$(document).ready(function(){
    $("body").mousemove(function(e){
        $(".ripple").show();
        $(".ripple").css({top:e.pageY-15,left:e.pageX-15});
    });
});