JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
<script src="https://rawgit.com/kendo-labs/bower-kendo-ui/d0c5ac95946c9dace4d999d755cc229d34107510/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kendo-labs/bower-kendo-ui/d0c5ac95946c9dace4d999d755cc229d34107510/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://rawgit.com/kendo-labs/bower-kendo-ui/d0c5ac95946c9dace4d999d755cc229d34107510/styles/kendo.default.min.css">
<script src="http://wingspan.github.io/wingspan-forms/dist/wingspan-forms-quickstart.js"></script>
<link rel="stylesheet" href="http://wingspan.github.io/wingspan-forms/dist/wingspan-forms.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.MyForm{display:table;padding:10px}.MyForm>div{display:table-cell;width:50%;padding:10px}.MyForm>pre{display:table-cell;vertical-align:top;padding:10px}

JavaScript 1.7

/** @jsx React.DOM */
'use strict';
var fieldInfos = {
        firstName: { dataType: 'text', label: 'First Name', name: 'firstName' },
        lastName: { dataType: 'text', label: 'Last Name', name: 'lastName' },
        gender: { dataType: 'enum', label: 'Gender', name: 'gender',
                  options: {
                      metadata: { idProperty: 'value', nameProperty: 'label'},
                      dataSource: [{ value: 'male', label: 'Male'}, { value: 'female', label: 'Female'}] }
                  },
        age: { dataType: 'number', label: 'Age', name: 'age' },
        birthday: { dataType: 'date', label: 'Birthday', name: 'birthday'}
    };


var MyForm = React.createClass({

    getInitialState: function () {
        return {
            firstName: '',
            lastName: '',
            gender: '',
            age: null,
            birthday: null
        };
    },

    render: function () {
        var controls = _.map(fieldInfos, function (fieldInfo) {
            return (
                <AutoField
                    fieldInfo={fieldInfo}
                    value={this.state[fieldInfo.name]}
                    onChange={_.partial(this.onFieldChange, fieldInfo.name)}
                    isValid={this.isFieldValid(fieldInfo.name)} />
            );
        }.bind(this));

        return (
            <div className="MyForm">
                <div>{controls}</div>
                <pre>{JSON.stringify(this.state, undefined, 2)}</pre>
            </div>
        );
    },

    onFieldChange: function (fieldName, value) {
        this.setState(_.object([[fieldName, value]]));
    },

    isFieldValid: function (fieldName) {*
        var val = this.state[fieldName];

        return val !== null && val !== ''
            ? [true, '']
            : [false, 'This field is required.'];
    }
});


var AutoField = WingspanForms.AutoField;
 
React.renderComponent(<MyForm/>, document.body);
WingspanForms.ControlCommon.attachFormTooltips($(document.body));