<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);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js