JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

function wrapWordsInSpans($element) {
  $element.html($.map($element.text().split(/\s+/), function(word) {
    return '<span>' + word + '</span>';
  }).join(' '));
}

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

function fadeInWords($element, duration) {
  wrapWordsInSpans($element);
  
  $element.children().hide();
  $element.show();

  fadeInChildren($element, duration);
}

$(function() {
  fadeInWords($('#hdr'), 'slow');
});