JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yuanqing/malarkey/master/dist/malarkey.min.js"></script>
<h1>npm is the package manager for <span id="what-npm-is-for">node</span></h1>

CSS

h1 {
    font-weight: 400;
    font-size: 44px;
    line-height: 1.2;
    letter-spacing: -2px;
    margin: 30px 0 0 0;
    color: rgba(0,0,0,0.9);
    text-transform: lowercase;
}

#what-npm-is-for {
    line-height: 1.2;
    display: inline-block;
    margin-bottom: 20px;
    color: #cb3837;
    width: 200px;
    text-align: left;
}

JavaScript

var el = document.querySelector('#what-npm-is-for'),
    initialText = el.textContent;

var pause = 800
var opts = {
    speed: 300,
    loop: false,
    postfix: ''
};

var typist = malarkey(el, opts)

typist
    .pause(2400).delete(initialText.length)
    .type('حمید رضا شیردل جوشقانی').pause(pause).delete(22)
    .type('mobile').pause(pause).delete(6)
    .type('angular').pause(pause).delete(7)
    .type('bower').pause(pause).delete(5)
    .type('jquery').pause(pause).delete(6)
    .type('nodebots').pause(pause).delete(8)
    .type('gulp').pause(pause).delete(4)
    .type('browserify').pause(pause).delete(10)
    .type('grunt').pause(pause).delete(5)
    .type('tessel').pause(pause).delete(6)
    .type('JavaScript.').pause(1200)