JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props);
    
    const values = [];
    for (let idx = 0; idx < props.count; idx++) {
	    values.push(Math.random());
    }
    
    this.state = { values };
  }
  
  componentDidMount() {
    this.updateValues();
  }

  updateValues() {
    const values = [... this.state.values];
    for (let idx = 0; idx < this.props.count; idx++) {
      if (Math.random() > (1 - this.props.percentToUpdate)) {
        values[idx] = Math.random();
      }    
    }    
	  this.setState({ values });
    
    setTimeout(() => this.updateValues())
  }

  render() {  
  	return (
    	<ul>
        {this.state.values.map((value, idx) => (
	        <li key={idx}>
            <NumberWrapper root={this.props.createNewRoot} value={value} />
          </li>
        ))}
    	</ul>
    );
  }
}

class NumberWrapper extends React.Component {
  handleRef = (ref) => {
    this.ref = ref;
  }

  componentDidMount() {
    this.maybeRenderNewRoot();
  }

  componentDidUpdate() {
    this.maybeRenderNewRoot();
  }

  maybeRenderNewRoot() {
    if (this.props.root) {
      ReactDOM.render(<Number value={this.props.value} />, this.ref);
    }  
  }

  render() {
    return this.props.root ? <span ref={this.handleRef} /> : <span><Number value={this.props.value} /></span>;
  }
}

class Number extends React.Component {
  render() {
  return <span>{this.props.value.toFixed(2)}</span>;
  }
} 

ReactDOM.render(<App count={500} percentToUpdate={1.0} createNewRoot={false} />, document.getElementById('container'));