<div id="app"></div>
body
  padding-top: 1em
  font-family: Helvetica, sans-serif
.container
  display: flex
  flex-flow: row wrap
textarea
  font-size: 14px
#md
  padding-left: 20px

  
@media (min-width: 601px)
  textarea
    width: 48%
@media (max-width: 600px)
  .container
    flex-flow: column nowrap
  textarea
    width: 95%
const MarkdownComponent = ({ text }) => <div id="md" dangerouslySetInnerHTML={{__html: marked(text)}} />;

const InputComponent = ({ text, handleChange }) =>
  (<textarea
    type="textarea"
    rows="30"
    placeholder="text here will be markdowned | marked-down" 
    value={text}
    onChange={e => handleChange(e.target.value)}
  />);

const initialText = 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*'

class App extends React.Component {
  state = { textValue: initialText };
  handleChange = (textValue) => this.setState({ textValue });
  render() {
    return (
      <div className="container">
        <InputComponent text={this.state.textValue} handleChange={this.handleChange} />
        <MarkdownComponent text={this.state.textValue} />
      </div>
    );
  }
};

ReactDOM.render(<App />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js