JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<span></span>
<fieldset id="console" style="border-radius: 0.5em;">
   <legend>&emsp;Console output&emsp;
       <button id="clearConsole" style="border-radius: 0.3em;" >Clear</button>&emsp;
    </legend>
</fieldset>

JavaScript

document.querySelector ? 
  document.querySelector ('#console') &&
    (console.log = (function () {
      var consoleLog = console.log,
          htmlConsole = document.getElementById ('console');
      [].forEach.call (document.querySelectorAll ('#console #clearConsole'),
                       function (clr) {
                         clr.addEventListener ('click', function ()  {
                             htmlConsole.innerHTML = ''; 
                           }, false);
                       })   
      htmlConsole.appendChild (htmlConsole = document.createElement ('pre'))                 
                   
      return function () {
          consoleLog.apply (console, arguments);
          htmlConsole.innerHTML += [].slice.call (arguments).join ('') + '\n';
        };
    }) ()) : 
  (document.getElementById ('console') && 
     (document.getElementById ('console').innerHTML += 
        '<br/><span style="color:red">no querySelector support - see console</span>'));

console.log ('document.body.children has ' + [].slice.call (document.body.children).length + ' elements');
   [].forEach.call (document.body.children, function (e, i) {
       console.log ('child ', i, ' : ', e);
    });