Inline confirmation UI

Works great in Chrome + Safari, okay in Firefox, not tested in IE

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Inline confirmation UI</title>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.min.js"></script>
		<script>
			$.get('gist.sass').done(function (sass) {
				var css = Sass.compile(sass);
				$('<style>').html(css).appendTo('head');
			});
		</script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react-with-addons.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/jsxtransformer.js"></script>
		<script type="text/jsx">
			/** @jsx React.DOM */

var Gist = React.createClass({

getInitialState: function () {
					return {
						confirm: false,
						remove: false
					};
				},

getConfirmState: function () {
					return this.state.remove || !this.state.confirm;
				},

render: function () {

return (
<div className="gist">
	<div className="item" hidden={this.state.remove}>
		<div className="item-pair" hidden={this.state.confirm}>
			<p className="item-text">Item</p>
			<button className="item-button" onClick={this.confirm}>
				<i className="button-icon fa fa-trash-o" />
				<span className="button-text">Remove</span>
			</button>
		</div>
		<p className="confirm" hidden={this.getConfirmState()}>
			<span className="confirm-text">Are you sure?</span>
			<button className="confirm-button" onClick={this.yes}>
				<span className="button-text">Yes</span>
			</button>
			<button className="confirm-button" onClick={this.no}>
				<span className="button-text">No</span>
			</button>
		</p>
	</div>
	<div className="gist-reset" hidden={!this.state.remove}>
		<button className="gist-button" onClick={this.reset}>
			<i className="button-icon fa fa-refresh"></i>
			<span className="button-text">Reset</span>
		</button>
	</div>
</div>
					);
				},

confirm: function () {
					this.setState({confirm: true});
				},

yes: function () {
					this.setState({remove: true});
				},

no: function () {
					this.setState({confirm: false});
				},

reset: function () {
					this.setState({
						confirm: false,
						remove: false
					});
				}

});

React.renderComponent(<Gist />, document.body);
		</script>
	</head>
	<body>
	</body>
</html>

Updated missing url //cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js to //cdnjs.cloudflare.com/ajax/libs/react/0.11.0/jsxtransformer.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react-with-addons.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js