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 Child extends React.Component {
	static propTypes = {
  	name: PropTypes.string.isRequired
  }
  
  render() {
  	return (
    	<span>Hello {this.props.name}!!</span>
    )
  }
}

class Parent extends React.Component {
  static propTypes = {
  	name: PropTypes.string.isRequired
  }
  
  state = {
  	visible: false
  }
  
  handleClick = () => this.setState({ visible: !this.state.visible })
  
  render() {  
  	if (this.state.visible) {
      return (
        React.cloneElement(this.props.children, { name: this.props.name })
      )
    }
    
    return (
    	<div onClick={this.handleClick}>
    	  <span>Click me for a greeting.</span>
    	</div>
    )
  }
}

ReactDOM.render(<Parent name='Jerry'><Child /></Parent>, document.getElementById('container'));