JSFiddle - React, Tailwind, and code Playground

by Alex Jones

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<p class="msg">+ 12</p>

CSS

.msg {
    position: relative;
    font-weight: bold;
    text-align: center;
    display: none;
    font-size: 2em;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    
    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;
    color: #fd1230;
}

JavaScript

$(function() {
    $(document).on("click", function(ev) {
        var position = {
            x: ev.clientX,
            y: ev.clientY
        };
        console.log(position);
        var msg = $(".msg");
        var w2 = msg.width() * 0.5;
        var h2 = msg.height() * 2;
        msg.css({
            position: "absolute",
            display: "block",
            left: (position.x - w2) + "px",
            top: (position.y - h2) + "px",
            opacity: 1.0
        });
        msg.stop().animate({
            opacity: 0.0,
            top: -100
        }, 1000);
    });
});