JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
<span id="header">asdf</span>
<span id="cursor">|</span>
</h1>

JavaScript

// counter and array of text to type in the header
 var headerArray = [
     "The Internet can't teach you about marketing",
     "I wish I learned in art school",
     "Every Successful Startup Eventually Does"],
     headerCounter = 0;

 // plugin that writes out the text like a typewriter
 (function ($) {
     $.fn.writeText = function (content, finishedCallback) {
         var contentArray = content.split(""),
             current = 0,
             elem = this,
             intervalHandle;

         intervalHandle = setInterval(function () {
             if (current < contentArray.length) {
                 elem.text(elem.text() + contentArray[current++]);
             } else {
                 // dispose the interval.
                 clearInterval(intervalHandle);

                 finishedCallback();
             }
         }, 50);
     };
 })(jQuery);




 // fades cursor in and out
 setInterval(function () {
     $('#cursor').fadeToggle(400);
 }, 400);

 // function to type the text
 function typeNext() {
     var text = headerArray[headerCounter];
     headerCounter++;
     if (headerCounter >= headerArray.length) {
         headerCounter = 0;
     }

     $('#header').text('').writeText(text, waitThenTypeNext);
 }

 function waitThenTypeNext() {
     setTimeout(typeNext, 2000);
 }

 // get things started.
 typeNext();