<div id="mountNode1" class="mountNode"></div>
<div id="mountNode2" class="mountNode"></div>

*, *:before, *:after {
  box-sizing: border-box;
}

.mountNode > div {
  border: 1px solid #ccc;
  margin: 1em;
  padding: 1em;
}

.mountNode input {
  display: block;
  margin: 1rem 0;
}

.mountNode pre {
  background-color: white;
}

const render = () => {
  document.getElementById('mountNode1').innerHTML = `
    <div>
      Hello HTML
      <input />
      <pre>${new Date().toLocaleTimeString()}</pre>
    </div>
  `;

  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello React',
      React.createElement('input', null),
      React.createElement('pre', null, new Date().toLocaleTimeString())
    ),
    document.getElementById('mountNode2')
  );
};

// setInterval(render, 1000);