JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">
    These are some words that </br> should be faded in one after the other.
</div>
<div class="example">
    No way some words that </br> should be faded in one after the other.
</div>

CSS

.hide
{
    display:none;
}

JavaScript

var words, $el;
var arrEl = [];

$('.example').each(function(){
    var $this = $(this);
    arrEl.push({el:$this,words : $.trim($this.text()).split(" ")});
    $this.empty();
});

function fadeIn(){
    var len = arrEl.length,  obj = arrEl.shift() || {};
    $el = obj.el;
    words = obj.words;
    if(len)  window.setTimeout(transitionElement, 0);
}

function transitionElement(){
    
    var wlen = words.length,
    span = $('<span/>', {'class':'hide'}).append(" " + words.shift());
    
    window.setTimeout(function(){
        if(wlen) 
           showWord(span);
        else
            fadeIn();
    },0);
}

function showWord(span){
     span.appendTo($el).fadeIn(500, transitionElement);
}
fadeIn();