JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="hdr" style="display: none;">Hello everyone lets learn javascript</h1>

JavaScript

function wrapLettersInSpans($element) {
  $element.html($.map($element.text().split(''), function(letter) {
    return '<span>' + letter + '</span>';
  }).join(''));
}

function fadeInChildren($element, duration) {
  (function fadeInNext($element) {
    $element.fadeIn(duration, function() {
    	fadeInNext($element.next());
    });
  })($element.children(':first'));
}

function fadeInLetters($element, duration) {
  wrapLettersInSpans($element);
  
  $element.children().hide();
  $element.show();

  fadeInChildren($element, duration);
}

$(function() {
  fadeInLetters($('#hdr'), 100);
});