JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textA"></div>
<div class="textB"></div>

<p class="textB" data-typedream-me data-breakable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquid adipisci, unde fugiat aperiam odit? Suscipit dolores reiciendis aliquid accusamus at similique commodi animi dolore quia, omnis, illum saepe esse!</p>

CSS

span[char-*] {
  border-bottom: solid 1px orange;
  color: #aaa;
  margin-right: 10px;
  display: inline-block;
  width: 50px;
}
.letter-d {
  color: red;
  border-bottom: solid 1px cyan;
}

  .textA .letter-e {
    color: green;
    font-size: 20px;
  }
  
   .textA .letter-o {
     font-size: 10px;
   }
   
   .textA .letter-O {
     font-size: 60px;
   }
   
   
  .textB .letter-e {
    color: blue;
    font-size: 40px;
  }
  
   .textB .letter-o {
     color: orange;
     font-weight: bold;
   }
   
   .word:first-child {
     background: yellow;
   }

JavaScript

(function(){
	var Typedreamer = function(element, text, options){
  console.log({
  text: text, options: options
  });
    var breakable = this.breakable = false;
    this.element = element;
    this.text = text;
    
    if (typeof options !== "undefined"){
    	breakable = typeof options.breakable !== "undefined" && options.breakable;
    }
    
    var words = text.split(' ');
    words.forEach(function(w, k){
    	var word = document.createElement('span');
      word.setAttribute('class', 'word');
      element.appendChild(word);
      w.split('').forEach(function(e){
        var character = e.replace(' ', '&nbsp;');
        var cssClass = e.replace(' ', 'space');
        var letter = document.createElement('span');
        letter.setAttribute('class', 'letter-' + cssClass);
        letter.innerHTML = character;
        word.appendChild(letter);
      });
           
      if (k < words.length - 1){
        var space = document.createElement('span');
        space.setAttribute('class', 'space');
        space.innerHTML = breakable ? "" : "&nbsp;";
      	element.appendChild(space);
      }
    });
  };
  Typedreamer.prototype.getElement = function(){
  	return this.element;
  };
  
  Typedreamer.prototype.getText = function(){
  	return this.text;
  };
  
  if (typeof window.Typedreamer === "undefined"){
  	window.Typedreamer = Typedreamer;
  }
})();

//////// jQuery Plugin

$.fn.extend({
	typedreamer: function(text, options){
  	var typeDreamer = new Typedreamer($(this)[0], text, options);
  }
});
$('*[data-typedream-me]').each(function(){
	var text = $(this).text();
	$(this).html('');
	$(this).typedreamer(text, {
  	breakable: typeof $(this).attr('data-breakable') !== "undefined"
  });
});

//////// USAGES

$(".textA").typedreamer("Hello WOrld !");
$(".textB").typedreamer("Hello WOrld !", {
	breakable: true
});