JSFiddle - React, Tailwind, and code Playground

by fxi

JavaScript

var cEl = function(type){
   return document.createElement(type);
  };

  var progressMsg = "";
  var elProgressLabel =  cEl("label");
  var elProgressContainer = cEl("div");

  /* progress bar */
  var elProgressBar = cEl("div");
  var elProgressBarContainer = cEl("div");
  var elProgressMessage = cEl("pre");
  var elProgressIssues = cEl("pre");
  var elProgressIssuesContainer = cEl("div");

  elProgressBar.classList.add("mx-inline-progress-bar");
  elProgressBarContainer.classList.add("mx-inline-progress-container");
  elProgressBarContainer.appendChild(elProgressBar);
  elProgressLabel.innerText = "Extraction progress";
  elProgressContainer.appendChild(elProgressLabel);
  elProgressContainer.appendChild(elProgressBarContainer);
  elProgressContainer.appendChild(elProgressMessage);
  elProgressContainer.appendChild(elProgressIssuesContainer);
document.body.appendChild(elProgressContainer);