JSFiddle - React, Tailwind, and code Playground

HTML

<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="app"></div>

Babel + JSX

class Li extends React.Component {
  render() {
    return (
      <li>{this.props.text}</li>
    )
  }
}

class Elem extends React.Component {
  render() {
    return (<div className="element">
      <ul>
        <Li text={this.props.text}/>
      </ul>
    </div>)
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: 'hello world'};
  }
  render() {
    return (
      <div className="pageWrapper">
        <h1>To Do List</h1>
        <input placeholder="Введите текст" onChange={this.submitText} type="text" className="inp"/>
        <Elem text={this.state.text}/>
      </div>
    )
  }

  submitText = (e) => {
    this.setState({
      text: e.target.value,
    });
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));