JSFiddle - React, Tailwind, and code Playground

JavaScript

// A function to make streams for us
var streamMaker = function(){
  var registeredListeners = [];
  return {
    // Have an observe function, so
    // people who are interested can
    // get notified when there is an update
    observe: function(callback){
      registeredListeners.push(callback)
    },

    // Add a value to this stream
    // Once added, will notify all
    // interested parties
    update: function(value){
      registeredListeners.forEach(function(cb){
        cb(value);
      })
    }
  }
}
// A function to make a new stream from an existing stream
// a reducing function, and an initial reduced value
var reducedStream = function(stream, reducingFunction, initialReducedValue){
  var newStream = streamMaker();
  var reducedValue = initialReducedValue;

  stream.observe(function(streamSnapshotValue){
    reducedValue = reducingFunction(reducedValue, streamSnapshotValue);
    newStream.update(reducedValue);
  });
  return newStream;
}
// Our reducer from before
var keyCountReducer = function(reducedValue, streamSnapshot){
 return reducedValue + 1;
}

//Pure Function to create the dom nodes
var createDOMNode = function(key, dataMapOrValue){
  var div = document.createElement("div");
  div.setAttribute("id",key);

  // Recurse for children
  if (typeof dataMapOrValue === "object" && dataMapOrValue !== null){
    Object.keys(dataMapOrValue).forEach(function(childKey){
      var child = createDOMNode(childKey, dataMapOrValue[childKey]);
      div.appendChild(child);
    })
  } else {
    // There are no children just a value.
    // We set the data to be the content of the node
    // Note this does not protect against XSS
    div.innerHTML = dataMapOrValue;
  }
  return div;
}

// Render Data

var render = function(rootID, data){
  var root;
  // Check if the root id is even defined
  if (document.getElementById(rootID) === null){
    // We need to add this root id so we can use it later
    root = document.createElement("div");
   ...