JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Source+Code+Pro:300&quot; rel=&quot;stylesheet&quot;&gt; "></script>
<span id="content"></span>
<span id="cursor">|</span>

CSS

body{
  background-color:#220023;
  color:#BEBEBE;
  font-size:4em;
  font-family:'Source Code Pro', monospace;
}

#container{
  position:relative;
  top:45%;
 
}
#cursor{
  -webkit-animation: 1s blink step-end infinite;
  -moz-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;
  }
}

JavaScript

var span=document.getElementById("content");
var strings=["hello world","how r u??"];

var index=0;  //access string in the strings array
var chIndex=0;  //get individual char pos for substring generation
var type=true;

setInterval(function(){
  if(index===strings.length)
    index=0;
  if(type){
    typeIt();
  }
  else
    deleteIt();
},200);

function typeIt(){
  if(chIndex<strings[index].length)
    span.innerHTML=strings[index].substring(0,chIndex++);
  else
    type=false;
}

function deleteIt(){
  if(chIndex===0){
    index++;
    type=true;
  }
  else
    span.innerHTML=strings[index].substring(0,chIndex--);
}