JSFiddle - React, Tailwind, and code Playground

JavaScript

var origValue = "this is <em>an</em> <strong>example</strong>";

var App = React.createClass({
    displayName: 'App',
    getInitialState: function () {
        return {
            html: origValue
        };
    },
    revert: function () {
        this.setState({
            html: origValue
        });
    },
    setSomeValue: function () {
        this.setState({
            html: "new value"
        });
    },
    render: function () {
        var handleChange = function (event) {
            this.setState({
                html: event.target.value
            });
        }.bind(this);

        return React.DOM.div(null,
        ContentEditable({
            html: this.state.html,
            onChange: handleChange
        }),
        React.DOM.button({
            onClick: this.revert
        }, "Revert"),
        React.DOM.button({
            onClick: this.setSomeValue
        }, "Set Other Value"));
    }
});

var ContentEditable = React.createClass({
    displayName: 'ContentEditable',
    render: function () {
        return React.DOM.div({
            onInput: this.emitChange,
            onBlur: this.emitChange,
            contentEditable: true,
            dangerouslySetInnerHTML: {
                __html: this.props.html
            }
        });
    },
    shouldComponentUpdate: function (nextProps) {
        return nextProps.html !== this.getDOMNode().innerHTML;
    },
    emitChange: function () {
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {

            this.props.onChange({
                target: {
                    value: html
                }
            });
        }
        this.lastHtml = html;
    }
});

React.renderComponent(App(null), document.body);