JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainDiv">
</div>

CSS

.pointsLabel{
    position:absolute;
    display:none;
    z-index:10;
    background-color:red;
    color:white;
    padding:5px;
}

JavaScript

showEarnedPoints(new Position("60px", "100px"));

function showEarnedPoints(position){
    label = new PointsLabel(position);
    label.fadeIn(function(){
        label.moveToTopRight(function(){
            label.fadeOut(function(){
                label.destroy();
            });
        });
    });
}

function Position(top, right){
    this.top = top;
    this.right = right;
}

function PointsLabel(position){
    var html = '<div class="pointsLabel">+10</div>'
    $("#mainDiv").append(html);
    this.domElement = $("#mainDiv .pointsLabel").last();
    this.domElement.css("top", position.top);
    this.domElement.css("right", position.right);
    
    this.fadeIn = function(callback){
        this.domElement.fadeIn("slow", callback);
    }
    this.fadeOut = function(callback){
        this.domElement.fadeOut("slow", callback);
    }
    this.moveToTopRight = function(callback){
        this.domElement.animate({top:"0", right:"0"}, 1000, callback);
    }
    this.destroy = function(){
        this.domElement.remove();
    }
}