JSFiddle - React, Tailwind, and code Playground

HTML

<div id="typewriter"></div>

<div id="Menu"></div>

JavaScript

var str = "<p><This is my <span style='color:red;'>special string</span> with an image !</p>", i = 0, isTag, text;

(function type() {
    text = str.slice(0, i++);
    if (text == str) 
    {
    	return "";
    }
    
    document.getElementById('typewriter').innerHTML = text;

    var char = text.slice(-1);
    if( char == '<' ) isTag = true;
    if( char == '>' ) isTag = false;

    if (isTag) return type();
    setTimeout(type, 80);
}());

var str = ["default-Text", "WriteIn", 0];

str[0] = "<br><p class='titles'>>Welcome back "+ getCookie("UserName") +"</p><br>_";
	str[1] = "Menu";
    typeWriter(100);

function typeWriter(ticks)
{
	text = str[0].slice(0,str[2]++)
	
	if (text == str[0])
	{
		return;
	}
	
	document.getElementById(str[1]).innerHTML = text;
	
	var char = str[0].slice(0,-1);
	if (char == '<'){ return typeWriter();}
	
	setTimeout(typeWriter, ticks);
}