JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://fooo.fr/~vjeux/fb/react.js/build/JSFiddleHacks.js"></script>
<script src="http://fooo.fr/~vjeux/fb/react.js/build/React-global.js"></script>
<script src="http://fooo.fr/~vjeux/fb/react.js/build/JSXTransformer.js"></script>

CSS

.btn {
    margin: 5px 3px;
}
.btn-block {
    margin: 5px 0;
}

.custom {
    border: 3px solid green;
}

JavaScript 1.7

var Button = React.createClass({
    render: function() {
        var cls = (this.props.class || '') + ' btn';

        if (['primary', 'info', 'success', 'warning', 'danger', 'inverse', 'link'].indexOf(this.props.type) !== -1) {
            cls += ' btn-' + this.props.type;
        }
        
        if (['large', 'small', 'mini'].indexOf(this.props.size) !== -1) {
            cls += ' btn-' + this.props.size;
        }
        
        if (this.props.block) {
            cls += ' btn-block';
        }
        
        if (this.props.disabled) {
            cls += ' disabled';
        }
        
        var htmlTag = 'button';
        if (['a', 'button', 'input'].indexOf(this.props.htmlTag) !== -1) {
            htmlTag = this.props.htmlTag;
        }
        
        if (htmlTag === 'input') {
            var type = this.props.type || 'button';
            return this.transferPropsTo(
                <input type={type} class={cls} disabled={this.props.disabled} value={this.props.children.toString()} />
            );
        }

        return this.transferPropsTo(
            React.DOM[htmlTag]({
                className: cls.trim(),
                disabled: this.props.disabled
            }, this.props.children)
        );
    }
});

React.renderComponent(
    <div>
        <h3>Types</h3>
        <p>
            <Button>Default</Button>
            <Button type="primary">Primary</Button>
            <Button type="info">Info</Button>
            <Button type="success">Success</Button>
            <Button type="warning">Warning</Button>
            <Button type="danger">Danger</Button>
            <Button type="inverse">Inverse</Button>
            <Button type="link">Link</Button>
       </p>
       
       <h3>Sizes</h3>
        <p>
            <Button type="primary" size="large">Large</Button>
            <Button type="primary">Default</Button>
            <Button type="primary" size="small">Small</Button>
            <Button type="primary"...