JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script src="http://fb.me/react-with-addons-0.11.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var InputField = React.createClass({

	getDefaultProps: function () {
		return {
			initialValue: '',
			onChange: null
		};
	},

	getInitialState: function () {
		return {
			value: this.props.initialValue
		};
	},

	render: function () {
		var state = this.state;
		return (
			<input type="text"
			       value={state.value}
			       onChange={this.onVolatileChange} />
		);
	},

	onVolatileChange: function (event) {
		this.setState({ 
			value: event.target.value 
		});

		this.scheduleChange();
	},

	scheduleChange: _.debounce(function () {
		this.onChange();
	}, 250),

	onChange: function () {
		var props = this.props;
		if (props.onChange != null) {
			props.onChange.call(this, this.state.value)
		}
	},

});

var Example = React.createClass({

	getDefaultProps: function () {
		return {
			initialValue: '',
		};
	},

	getInitialState: function () {
		return {
			value: this.props.initialValue
		};
	},

	render: function () {
		return (
			<div>

				<InputField initialValue={this.props.initialValue}
				            onChange={this.onExampleFieldChange} />

				<p>You typed: <strong>{this.state.value}</strong></p>

			</div>
		);
	},

	onExampleFieldChange: function (value) {
		this.setState({ value: value });
	},

});

React.renderComponent(<Example initialValue=""/>, document.body);