JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

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;

function typeIt(){
 var t_interval = setInterval(function(){
 	if(chIndex<=strings[index].length)
    span.innerHTML=strings[index].substring(0,chIndex++);
  else{
  	type=false;
    window.clearInterval(t_interval);
    setTimeout(deleteIt, 1000);
  }
 }, 20)
}

function deleteIt(){
	var d_interval = setInterval(function(){
  	if(chIndex<0){
    index++;
    type=true;
    window.clearInterval(d_interval);
    typeIt();
  }
  else
    span.innerHTML=strings[index].substring(0,chIndex--);
  }, 20)
}
typeIt();