JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

</div>

CSS

body{
  background:black;
}

span {
  font-family: "Courier New";
  font-size: 24px;
  color: #fff;
  font-weight: bold;
}

JavaScript

typer = function(e, s, d, t) {
  var eI = 0;
  var speed = s;
  var delay = d;
  var eLength = t.length;
  var z = 1;
  function loop() {
    var p = $("<div class='azy-typer-container'></div>");
    var c_t = $("<span class='azy-typer-element'></span>")
    p.append(c_t);
    $(e).append(p);
    interval = setInterval(function() {
      c_t.text(t[eI].substring(0, z));
      if (z + 1 > t[eI].length) {
        clearInterval(interval);
        eI = eI + 1;
        if (eI + 1 <= t.length) {
        	z = 0;
        	setTimeout(loop,d);
        }
      } else {
        z = z + 1;
      }
    }, s)
  }
  loop();
}
new typer(".container", 100, 1000, ["Hi there!", "This is a typer demo ","What do you think about this ?"]);