JSFiddle - React, Tailwind, and code Playground

by Ujwal Ratra

HTML

<div id="container">

<div class="typing hidden">
  <h1>This is a Heading</h1>
    <h2>This is a Subheading</h2>
    <p>A paragraph of text for testing.</p>
</div>
  
    
</div>

CSS

h1 {
    color:blue;
} 

h2 {
    color: red;
}

p {
    color:green;
}

JavaScript

var $el = $('.typing'),  
    html = $el.html(),
    txt = $el.text(),
    txtLen = html.length,
    timeOut,
    char = 0;

$el.text('|');

(function typeIt() {   
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function() {
        char++;
        var type = html.substring(0, char);
        $el.html(type + '|');
        typeIt();

        if (char == txtLen) {
            $el.html($el.html().slice(0, -1)); // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);
}());