JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<section id=counter>
 <div id="talkbubble""><span class="count">20</span></div>
</section>

CSS

.count
 {line-height: 100px;color:white;margin-left:30px;font-size:25px;}
#talkbubble {width: 120px;height:80px;background: red;position: relative;  -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; float:left; margin:20px;}
 #talkbubble:before {content:"";position: absolute;right: 100%;top: 26px; idth: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid red;border-bottom: 13px solid transparent;}

JavaScript

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});