JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
  
    <div id='likeButton' class='post_content_tools_button_like heart' onclick={addLike()}>
      <span>
        <i class='fa-heart me-2' />
        <span id='counterHeart'>100</span>
      </span>
    </div>

  </body>

</html>

CSS

.post_content_tools_button_like {
  display: flex;
  border-radius: 100px;
  background-color: transparent;
  text-align: center;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  cursor: pointer;
  padding: 4px 12px;
  color: rgb(191 197 208);

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

}

.post_content_tools_button_like.heart.active {
  color: rgb(34, 197, 94) !important;
}
.post_content_tools_button_like.heart:hover {
  color: rgb(34, 197, 94) !important;
  background-color: rgba(34, 197, 94, 0.15);
}

.counter-up {
  display: inline-flex;
  opacity: 0;

  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  -ms-transform: translate3d(0, -10px, 0);
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);

  -ms-transition: all 0.05s ease-in-out;
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;
}
.counter-down {
  display: inline-flex;
  opacity: 0;

  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:...

JavaScript

function addLike(e) {

	var counter = document.getElementById(`counterHeart`);
  
  counter.className = 'counter-up';
  setTimeout(() => { counter.className = 'counter-down'; }, 50);
  setTimeout(() => { counter.className = 'counter-initial'; }, 100);

}