JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tool"></div>
<div id="main"></div>
CSS
.box {
height: 100px;
width: 200px;
background: #330;
color: #fff;
margin: 0 5px 5px 0;
padding: 10px;
}
JavaScript
var $tool = document.getElementById('tool');
var $main = document.getElementById('main');
var partBox = React.createClass({displayName: 'partBox',
render: function(){
return (
React.DOM.div({className:"box"}, "HELLO! ", this.props.ts)
)
}
});
var createBoxBtn = React.createClass({displayName: 'createBoxBtn',
createBox: function(){
var timeStamp = new Date().getTime();
React.renderComponent(partBox( {ts:timeStamp} ), $main);
},
render: function(){
return (
React.DOM.button( {onClick:this.createBox}, "createBox")
)
}
});
React.renderComponent(createBoxBtn(null ), $tool);