JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="comment">Comment </div>
<div class="comment">Comment </div>
<div class="comment">Comment </div>
<div class="comment">Comment </div>
<div class="comment">Comment </div>
<div class="comment">Comment </div>
<div class="comment">Comment </div>
<div class="comment">Comment </div>

JavaScript

//wrap each letter in text 
$(".comment").children().andSelf().contents().each(function(){
	if (this.nodeType == 3) {
		var $this = $(this);
		$this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
	}
});
$.each($('.comment span'), function(i, el){

    $(el).css({'opacity':0});
    
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },100 + ( i * 100 ));
    
});