JSFiddle - React, Tailwind, and code Playground

HTML

<span class="placeholder-cont">
    <span class="spn">name</span>
</span>

<p>reload the page to play again</p>

CSS

.spn {
  position: absolute;
  transition: all 1s ease;
  top: 8px;
  left: 5px;
  text-transform: uppercase;
  letter-spacing: 0px;
  margin-top: 40px;
}

.spn:nth-of-type(2) {
  left: 16px
}

.spn:nth-of-type(3) {
  left: 27px
}

.spn:nth-of-type(4) {
  left: 42px
}

p {
  margin-top: 30px;
  display: none;
}


/* span {
  transition: all 1s;
} */

span.anim {
  color: red;
  marginTop: -10px;
}

JavaScript

$(document).ready(function() {
  var text = $(".spn").text().split("");
  $(".spn").remove();
  for (i = 0; i < text.length; i++) {
    $(".placeholder-cont").append("<span class='spn'>" + text[i] + "</span>");
  }
  var setTO = setTimeout(function AnimTxt() {
    $(".spn").each(function(index, el) {
      setTimeout(function() {
        $(el).css({
          color: "red",
          marginTop: "-10px"
        });
        if (index == (text.length - 1)) {
          setTimeout(function() {
            $('p').show();
          }, 1000);
        }
      }, 100 * index);
    });
  }, 3000);
});