JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<!-- <div id="type" data-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere earum quia ea aspernatur repellendus quod eveniet architecto porro aut quo quae autem voluptas saepe repudiandae possimus, ad tempore laboriosam voluptate?"></div> -->


<h1>12</h1>


<p>2</p>
<p>312</p>
<p>3</p>
<p>1</p>
<p>8</p>
<p>6</p>

CSS

#type {
  font-size: 40px;
}

JavaScript

var kfn_type = function(element,speed){
        var text = element.dataset.text;
        var arr = Array.from(text);
        var b = 0;
        var int = setInterval(function(){
            if (b === arr.length - 1) {
                clearInterval(int)
            }
            element.innerHTML += arr[b];
            b++;
        },speed)    
    }
kfn_type(document.querySelector('#type'),10)


var level = [12,23,45,1,43]