JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="https://npmcdn.com/react/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/immutable/dist/immutable.min.js"></script>
<script src="https://npmcdn.com/draft-js/dist/Draft.min.js"></script>
<div id="root"></div>

CSS

/**
 * @providesModule DraftEditor
 * @permanent
 */

/**
 * We inherit the height of the container by default
 */

.DraftEditor-root {
  background: #fff;
  border: 0.5px solid #ddd;
  font-family: 'Helvetica', serif;
  font-size: 14px;
  padding: 15px;
},
.DraftEditor-editorContainer,
.public-DraftEditor-content {
  height: inherit;
  text-align: initial;
}

.DraftEditor-root {
  position: relative;
}

/**
 * Zero-opacity background used to allow focus in IE. Otherwise, clicks
 * fall through to the placeholder.
 */

.DraftEditor-editorContainer {
  background-color: rgba(255, 255, 255, 0);
  /* Repair mysterious missing Safari cursor */
  border-left: 0.1px solid transparent;
  position: relative;
  z-index: 1;
}

.public-DraftEditor-content {
  outline: none;
  white-space: pre-wrap;
}

.public-DraftEditor-block {
  position: relative;
}

.DraftEditor-alignLeft .public-DraftEditor-block {
  text-align: left;
}

.DraftEditor-alignLeft .public-DraftEditorPlaceholder/root {
  left: 0;
  text-align: left;
}

.DraftEditor-alignCenter .public-DraftEditor-block {
  text-align: center;
}

.DraftEditor-alignCenter .public-DraftEditorPlaceholder/root {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.DraftEditor-alignRight .public-DraftEditor-block {
  text-align: right;
}

.DraftEditor-alignRight .public-DraftEditorPlaceholder/root {
  right: 0;
  text-align: right;
}
/**
 * @providesModule DraftEditorPlaceholder
 */

.public-DraftEditorPlaceholder-root {
  color: #9197a3;
  position: absolute;
  z-index: 0;
}

.public-DraftEditorPlaceholder-hasFocus {
  color: #bdc1c9;
}

.DraftEditorPlaceholder-hidden {
  display: none;
}
/**
 * @providesModule DraftStyleDefault
 */

.public-DraftStyleDefault-block {
  position: relative;
  white-space: pre-wrap;
}

/* @noflip */

.public-DraftStyleDefault-ltr {
  direction: ltr;
  text-align: left;
}

/* @noflip */

.public-DraftStyleDefault-rtl {
  direction: rtl;
  text-align: right;
}

/**
 * These rules provide...

Babel + JSX

const { render } = ReactDOM;
const { Component } = React;
const { Editor, EditorState } = Draft;

class MyEditor extends Component {
  constructor() {
    super();
    this.state = { 
    	editorState: EditorState.createEmpty() 
    };
    this.onChange = (editorState) => this.setState({ editorState });
  }
  render() {
    const { editorState } = this.state;
    return (
    	<div>
      	<h3>Draft.js - playground</h3>
      	<Editor 
        	editorState={editorState} 
          onChange={this.onChange}
          placeholder="Write something cool..."
        />
      </div>
    );
  }
}

render(<MyEditor />, document.getElementById('root'));