JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var Input = React.createClass({
        getDefaultProps: function() {
            return {
                type: 'text'
            };
        },
        getInitialState: function() {
            return {

            };
        },
        className: function() {
            return 'form-input';
        },
        isValid: function() {
            return false;
        },
        render: function() {
            var self = this;

            return (
                <input type={self.props.type} className={self.className()} />
            );
        }
    });
var FormContainer = React.createClass({
        getDefaultProps: function() {
            return {
                elements: []
            };
        },
        getInitialState: function() {
            return {
                errors: {}
            };
        },
        className: function() {
            return 'form-container';
        },
        isValid: function() {
            setTimeout(function () {
                var valid = true,
                self = this;
                console.log(this.refs);
                this.props.elements.forEach(function(ref){
                    if (!self.refs[ref].isValid()){
                        valid = false;
                    }
                });
    
                return valid;
            
            }.bind(this), 2000);
        },
        render: function() {
            var self = this;

            return (
                <form className={self.className()}>
                    <Input ref="date"/>

                    <span>Things be valid: </span> <span>{self.isValid()}</span>
                </form>
            );
        }
    });
 
React.render(<FormContainer />
, document.body);