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 Input extends React.Component {
	static propTypes = {
  	value: PropTypes.string,
    onChange: PropTypes.func,
  };
  
	render() {
  	return (
    	<input onChange={this.props.onChange} value={this.props.value} />
    );
  }
}

class App extends React.Component {
	static propTypes = {
  	name: PropTypes.string,
  };
  
  constructor() {
  	super()
    this.state = {
    	value: "",
    };
  }
  
  handleChange = (e) => {
  	this.setState({
    	value: e.target.value,
    });
    alert('Change');
  }
  
  bindInput = (node) => {
  	this.inputNode = node;
  }
  
  triggerChange = () => {
  	let ev = new Event("input", { bubbles: true });
		let el = ReactDOM.findDOMNode(this.inputNode);
    
		Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(el, "Test")
		el.dispatchEvent(ev);
  }
  
  render() {
  	const {value} = this.state;
  	return (
    	<div>
    	  <Input ref={this.bindInput} onChange={this.handleChange} value={value} />
        <button onClick={this.triggerChange}> Trigger value change </button>
    	</div>
    );
  }
}

ReactDOM.render(<App name="world"/>, document.getElementById('container'));