JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react-with-addons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/JSXTransformer.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="container"></div>

CSS

form {
    float:left;
    padding: 20px;
    width: 35em;
}

.form-container {
    background-color: whitesmoke;
    border-radius: 5px;
    margin: 5px;
    border: 1pt solid silver;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: hsla(0, 0%, 0%, 0.46);
    width: 35em;
    height: 100%;
    z-index: 5000;
    text-align: center;
}

.overlay .indicator {
    margin-top: 10%   
}
}

JavaScript 1.7

/**
 * @jsx React.DOM
 */
 
var Overlay = React.createClass({
    getDefaultProps: function() {
        return {
            src: "http://www.jlg.com/images/layout/loadingGif.gif"
        };
    },

    render: function() {
        return <div className="overlay">
            <img className="indicator" width="100" src={ this.props.src } />
        </div>;
    }
});

var ContactForm = React.createClass({
    getInitialState: function() {
        return {};
    },

    render: function() {
        return <form className="form">
            <div className="form-group">
                <label htmlFor="firstName">First Name:</label>
                <input value={this.props.firstName} className="form-control" id="firstName" type="text" />
            </div>
            <div className="form-group">
                <label htmlFor="lastName">Last Name:</label>
                <input value={this.props.lastName} className="form-control" id="lastName" type="text" />
            </div>
            <div className="form-group">
                <label htmlFor="city">City:</label>
                <input value={this.props.city} className="form-control" id="city" type="text" />
            </div>
            <div className="form-group">
                <button type="submit" className="btn btn-default">Update</button>
            </div>
        </form>;
    }
});
 
var SmartForm = React.createClass({
    
    getInitialState: function() {
        return {
            notReady: true
        };
    },

    componentDidMount: function() {
        //simulate delayed retrieval of data
        var self = this;
        setTimeout(function() {
            self.replaceState({
                firstName: "Jim",
                lastName: "Cowart",
                city: "Chattanooga"
            });
        }, 4000);
    },
        
    render: function() {
        return <div className="form-container">
            {
                (this.state.notReady) ? <Overlay /> : null
            }
     ...