JSFiddle - React, Tailwind, and code Playground

HTML

<div><span id="target">Place holder text</span><span class="blink">|</span></div>

CSS

/* Css for blinking cursor */
.blink {
  -webkit-animation: 1s blink step-end infinite;
	-moz-animation: 1s blink step-end infinite;
	-ms-animation: 1s blink step-end infinite;
	-o-animation: 1s blink step-end infinite;
	animation: 1s blink step-end infinite;
}

@keyframes "blink" {
	from,to {
	opacity: 0;
    }
     50% {
        opacity: 1;
     }
}

@-moz-keyframes blink {
	from,to {
	opacity: 0;
    }
     50% {
       opacity: 1;
     }
}

@-webkit-keyframes "blink" {
	from,to {
	opacity: 0;
    }
     50% {
       opacity: 1;
     }
}

@-ms-keyframes "blink" {
	from,to {
	opacity: 0;
    }
     50% {
       opacity: 1;
     }
}

@-o-keyframes "blink" {
	from,to {
	opacity: 0;
    }
     50% {
       opacity: 1;
     }
}

JavaScript

function microTyperHelper(target, string){
  if(!string) {string=target.innerHTML.substring(0,target.innerHTML.length -1)}
  target.innerHTML = string;
 }
function microTyper(targetId, text, speed, pause, loop) {
  target = document.getElementById(targetId);
  delay = pause;
  for(var i=0;i<text.length;i++) {
   if(target.innerHTML.length != 0 || i != 0) {
   targetLength = i === 0 ? target.innerHTML.length : text[i-1].length;
      for(var j=targetLength;j>0;j--){
        delay += speed;
        setTimeout(microTyperHelper, delay, target, false);
        } delay +=speed; }
    for(var j=0;j<text[i].length;j++){
      delay += speed;
      setTimeout(microTyperHelper, delay, target, text[i].substring(0, j+1));
    } delay += pause; }
  if(loop){setTimeout(microTyper, delay, targetId, text, speed, pause, loop)}}



microTyper("target", ['Type me first', 'Then me third', 'And finally type me'], 100, 1000, true);