JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>

SCSS

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 300px;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

h1 {
  font-weight: bold;
  margin-bottom: 15px;
}

input {
  margin-right: 5px;
}

.test {
  background: #fff000;
  height: 50px;
}

.grid20 {
  width: 20%;
  float: left;
  padding: .5rem 0;
}

.grid80 {
  width: 80%;
  float: left;
  padding: .5rem 0;
}



$breakpoint-tablet: 768px;
$breakpoint-phone: 375px;

@media (max-width: $breakpoint-tablet) {

  .md-grid100 {
    width: 100%;
    text-align: center;
    padding: .5rem 0;
  }
}



//@media (max-width: $breakpoint-tablet) {
//
//
//  .md-grid100 {
//    width: 100%;
//    text-align: center;
//    margin: 0 1rem;
//  }
//}


@media (max-width:  $breakpoint-phone) {


  .md-grid100 {
    width: 100%;
    text-align: center;
    padding: .5rem 0;
  }
}

React

var INSTRUCTIONS = `
    Read the code below and complete the three tasks
    1) Make ComponentThree render after the continue button is pressed.
    2) Make the name 'Chris' in ComponentThree dynamic based on the input in the ComponentTwo
    3) Explain how you would make the continue button appear under the text box and full width on a mobile device.
    
    
    
    Learned:  
    Target and Set State
    https://duncanleung.com/fixing-react-warning-synthetic-events-in-setstate/
    
    
    
    
`
class ComponentOne extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      workflow: 'GET_NAME',
      name: 'Chris'
    }
  }
  
  setWorkflow(workflow) {
  	this.setState({workflow})
  }

  render() {
  
  	return (
    	this.state.workflow == 'GET_NAME' 
      	? <ComponentTwo 
            setWorkflow={this.setWorkflow.bind(this)}  
            onChange={(e) => this.setState({name: e.target.value})}
            name={this.state.name}
          /> 
        : <ComponentThree name={this.state.name} />
    ) 
  }
}

class ComponentTwo extends React.Component {
  render() {
    return (
      <div>
        <h1>Enter your name</h1>
          <div className="grid20 md-grid100">
            <input type="text" name="fname" value={this.props.name} onChange={(e) => this.props.onChange(e)} />
          </div>
          <div className="grid80 md-grid100">
            <button onClick={() => this.props.setWorkflow('WELCOME_MSG') } >Continue</button>
          </div>

      </div>
    )
  }
}

class ComponentThree extends React.Component {
   render() {
     return (
       <div className="test">
         <h1>Hello {this.props.name}</h1>
       </div>
     )
   }
}
ReactDOM.render(<ComponentOne />, document.querySelector("#app"))