JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

* {
    color: red;
}

JavaScript 1.7

/** @jsx React.DOM */

var MagicFrame = React.createClass({
    render: function() {
        return <iframe style={{border: 'none'}} />;
    },
    componentDidMount: function() {
        React.renderComponent(this.props.children, this.getDOMNode().contentDocument.body);
    },
    componentDidUpdate: function() {
        React.renderComponent(this.props.children, this.getDOMNode().contentDocument.body);
    },
    componentWillUnmount: function() {
        React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
    }
});

var Hello = React.createClass({
    render: function() {
        return <div>red <MagicFrame><div>Hello {this.props.name}</div></MagicFrame></div>;
    }
});
 
React.renderComponent(<Hello name="World" />, document.body);