JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<script src="https://rawgithub.com/ripplejs/ripple/master/dist/ripple.min.js"></script>
<script src="https://rawgithub.com/ripplejs/events/master/dist/ripple-events.min.js"></script>
<script src="https://rawgithub.com/ripplejs/refs/master/dist/ripple-refs.min.js"></script>
<script src="https://rawgithub.com/ripplejs/markdown/master/dist/ripple-markdown.min.js"></script>
<script type="text/template" id="template">
  <div id="editor">
    <textarea on-input="{{ this.change }}">{{text}}</textarea>
    <div markdown="{{text}}"></div>   
  </div>
</script>

CSS

html, body, #editor {
    margin: 0;
    height: 100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
}

textarea, #editor div {
    display: inline-block;
    width: 49%;
    height: 100%;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
}

textarea {
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: 'Monaco', courier, monospace;
    padding: 20px;
}

code {
    color: #f66;
}

JavaScript

var View = ripple('#template')
  .use(ripple.events)
  .use(ripple.markdown);

View.prototype.change = function(event) {
  this.set('text', event.target.value);  
};

var view = new View({
  data: { 
    text: '# title' 
  }   
});

view.appendTo(document.body);