JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>

CSS

.adaptive_placeholder_input_container {
	position: relative;
}

.adaptive_input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 200px;
	height: 40px;
	border: 3px solid #aaaaaa;
	/*border-radius*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 0 0 1em;
	padding: 1em;
	background: #fff;
	resize: none;
	outline: none;
	box-shadow: none;
}
.adaptive_input:focus {
	border-color: #00bafa;
}
.adaptive_input:focus + .adaptive_placeholder:before {
	color: #00bafa;
}
.adaptive_input:focus + .adaptive_placeholder:before, .adaptive_input:valid + .adaptive_placeholder:before {
	/*transition-duration*/
	-webkit-transition-duration: .2s;
	-moz-transition-duration: .2s;
	-o-transition-duration: .2s;
	transition-duration: .2s;
	/*transform*/
	-webkit-transform: translate(0, -16px) scale(0.9, 0.9);
	-moz-transform: translate(0, -16px) scale(0.9, 0.9);
	-ms-transform: translate(0, -16px) scale(0.9, 0.9);
	-o-transform: translate(0, -16px) scale(0.9, 0.9);
	transform: translate(0, -16px) scale(0.9, 0.9);
}
.adaptive_input:invalid + .adaptive_placeholder:before {
	content: attr(alt);
	box-shadow: none;
}
.adaptive_input + .adaptive_placeholder {
	pointer-events: none;
	line-height: 1em;
	position: absolute;
	left: 10px;
	top: 10px;
}
.adaptive_input + .adaptive_placeholder:before {
	font-family: Verdana, Geneva, sans-serif;
	content: attr(placeholder);
	display: inline-block;
	padding: 0 2px;
	color: #898989;
	/*transition*/
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	background-color: #ffffff;
}

Babel + JSX

class Adaptive_Input extends React.Component {
  handle_change(e) {
    var new_text = e.currentTarget.value;
    this.props.on_Input_Change(new_text);
  }

  render() {
    return (
      <div className="adaptive_placeholder_input_container">
        <input
          className="adaptive_input"
          type="text"
          required="required"
          onChange={this.handle_change.bind(this)} />
        <label
          className="adaptive_placeholder"
          alt={this.props.initial}
          placeholder={this.props.focused} />
      </div>
    );
  }
}

class Form extends React.Component {
  render() {
    return (
      <form>
        <Adaptive_Input
          initial={'Name Input'}
          focused={'Name Input'}
          on_Input_Change={this.props.handle_text_input} />

        <Adaptive_Input
          initial={'Value 1'}
          focused={'Value 1'}
          on_Input_Change={this.props.handle_value_1_input} />

        <Adaptive_Input
          initial={'Value 2'}
          focused={'Value 2'}
          on_Input_Change={this.props.handle_value_2_input} />
      </form>
    );
  }
}

class Page extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Name: 'No Name',
      Value_1: '0',
      Value_2: '0',
      Display_Value: '0'
    };
  }

  handle_text_input(new_text) {
    this.setState({
      Name: new_text
    });
  }

  handle_value_1_input(new_value) {
    new_value = parseInt(new_value);
    var updated_display = new_value + parseInt(this.state.Value_2);
    updated_display = updated_display.toString();
    this.setState({
      Value_1: new_value,
      Display_Value: updated_display
    });
  }

  handle_value_2_input(new_value) {
    new_value = parseInt(new_value);
    var updated_display = parseInt(this.state.Value_1) + new_value;
    updated_display = updated_display.toString();
    this.setState({
      Value_2: new_value,
      Display_Value: updated_display
    });
  }

  render() {
   ...