JSFiddle - React, Tailwind, and code Playground

by Matias Guijarro

HTML

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

JavaScript 1.7

/** @jsx React.DOM */

var Navbar = React.createClass({
  render: function() {
    return <nav className="navbar navbar-default" role="navigation">
      <div className="container-fluid">
        <a className="navbar-brand" href="#">MXCuBE</a>
        <Login/>
      </div>
    </nav>
  }
});

var Login = React.createClass({
    login: function() { alert("test"); },
    render: function () {
        return <form className="navbar-form navbar-left">
                 <div className="form-group">
                   <input type="text" className="form-control" placeholder = "Proposal"/>
                   <input type="password" className="form-control"
        placeholder="Password"/> 
                   <button className="btn btn-default" onClick={this.login}>Login</button>
                 </div>
               </form>
  }
});

React.renderComponent(<Navbar/>, document.getElementsByTagName("header")[0]);