JSFiddle - React, Tailwind, and code Playground

by samselikoff

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>

CSS

.hide {
    display: none;
}

input {
    display: block;
}

JavaScript 1.7

/*
  Components
*/

var UserForm = React.createClass({
  getInitialState: function() {
    return {showDetail: true};
  },
  
  handleLanguageSelected: function(index) {
    this.setState({selected: index});
  },
  
  render: function() {
    var firstName = this.props.user.firstName;
    var lastName = this.props.user.lastName;
    var email = this.props.user.email;
    var website = this.props.user.website;
    var checked = true;
    
    return (
      <form>
        <input type="text" value={firstName} />
        <input type="text" value={lastName} />
        <label for="details">
          <input type="checkbox" name="details" checked={checked} />
          Show details
        </label>
        <div className={checked ? '' : 'hide'}>
          <input type="text" value={email} />
          <input type="text" value={website} />
        </div>
      </form>
    );
  }
});


/*
  Render it
*/
var user = {
  firstName: 'Sam',
  lastName: 'Selikoff',
  email: '[email protected]',
  website: 'samselikoff.com'
};

React.render(
  <UserForm user={user} />,
  document.body
);