JSFiddle - React, Tailwind, and code Playground

HTML

I have a very simple website problem. I have a <span id='replace'>sentence</span> in which one word fades out, and is replaced by another word in an array.

CSS

#replace{color:#f00;}

JavaScript

$(function() {
    setTimeout(function(){
       type($('#replace'),'div on a website with text',0);
    },1000);
});

function type($el, text, position) {

	if (text.length >= position) {
		var rchars = 'qbvol'; // typo chars ;-)
		if (position % 3 == 0 && Math.random() > .85) { // insert typo!
			var typo;
			var chr = text.substr(position, 1);
			if (chr == chr.toUpperCase()) { typo = chr.toLowerCase(); }
			else { typo = rchars.substr(Math.floor(Math.random() * rchars.length), 1); }
			$el.text(text.substring(0, position - 1) + typo + '_');
			setTimeout(function() { type($el, text, position - 1); }, 200)
		}
		else {
			$el.text(text.substring(0, position) + '_');
			setTimeout(function() { type($el, text, position + 1); }, 150)
		}
	}
	else {
		setTimeout(function() { $el.text(text); }, 400)
	}
}