JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/co/4.1.0/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.2/mootools-core.min.js"></script>
<div id='target'>
</div>

CSS

body {
      font-family: Helvetica, Sans, Arial;
    }
    
    p {
      display: block;
    }

JavaScript

function get(text, delay) {
  return new Promise(function(resolve, reject) {
    var request = new Request.HTML({
      url: '/echo/html/',
      data: {
        html: text,
        delay: delay
      },
      method: 'post',
      onSuccess: function(data) {
        resolve(data);
      },
      onFailure: function() {
        reject();
      }
    });
    request.send();
  });
}

var chapterStrs = [
  'chapter1',
  'chapter2',
  'chapter3',
  'chapter4',
  'chapter5',
  'chapter6',
  'chapter7',
  'chapter8',
  'chapter9',
  'chapter10',
];

var getChapter = function(chapterStr) {
  return get('<p>' + chapterStr + '</p>', Math.round(Math.random() * 2));
};

var addToPage = function(data) {
  data[0].inject($('target'));
}

function *gen(){
	for(var i=0;i<chapterStrs.length;i++){
    addToPage(yield getChapter(chapterStrs[i]));
  }
}

co(gen);