JSFiddle - React, Tailwind, and code Playground

HTML

<!-- button for testing the animation -->
<div id="press"></div>

<div id="creditModule">
        <div id="creditSystem">
            <div class="cCurrency"></div>
            <span class="cCreditsNo">5000</span>
        </div>
</div>

CSS

#press {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 34px;
    background-color: rgb(23,23,211);
    border: 1px solid rgb(23,199,217);
    border-radius: 4px;
}

#creditModule {

}

#creditSystem {
    background-color: #DDDDDD;
    border-color: #A7A7A7 #DADADA #F2F2F2;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    cursor: default;
    font-family: "Ubuntu",sans-serif;
    font-size: 1.25em;
    height: auto;
    left: 75%;
    margin: 0;
    min-width: 10%;
    padding: 0;
    position: absolute;
    top: 7.1%;
    width: auto;
}

.cCurrency {
    background-image: url("../CA_Imgs/Icons/0000_WAIcons.png");
    background-position: 0 -49px;
    background-repeat: no-repeat;
    display: inline;
    height: 13px;
    left: 5px;
    margin: 0;
    padding: 0 0 0 10px;
    position: relative;
    top: 2px;
    width: 11px;
}

.cCreditsNo {
    color: #905F8E;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    margin: 0;
    padding: 0 10px;
}

.cCCost {
    opacity: 0;
    text-align: center;
    background-color: #CCC;
    border-color: #A7A7A7 #DADADA #F2F2F2;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    cursor: default;
    font-family: "Ubuntu",sans-serif;
    font-size: 1.25em;
    left: 75%;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 7.1%;
    height: inherit;
    width: auto;
}
    .cCCost:before{
        content: "";
        position: relative;
        left: 146%;
        top: 8px;
        border-color: transparent transparent transparent red;
        border-style: solid;
        border-width: 10px;
        padding: 0;
        margin: 0;
    }


.cCostNo {
    padding: 0;
    border: none;
    margin: 0;
}

JavaScript

(function()
{

$("#press").on("click", function(){creditCost(50)});

function creditCost(x)
{
    var eParent = document.getElementById("creditModule");
    eParent.innerHTML += '<div class="cCCost"><p class="cCostNo"></p></div>';
    var aCostNo = document.getElementsByClassName("cCostNo");
    var eLatestCost = aCostNo[aCostNo.length - 1];
    var eCCost = eLatestCost.parentNode;
    eLatestCost.innerHTML = x;
    $(eCCost).animate ({"left":"-=50px", "opacity":"1"}, 250, "swing");
    setTimeout(function()
    {
        $(eCCost).animate ({"left":"+=50px", "opacity":"0"}, 250, "swing", function ()
        {
            $(eCCost).remove();
        })    
    }, 1000);
}

})();