JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="https://npmcdn.com/[email protected]"></script>
<main></main>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

textarea {
  width: 100%;
  height: 200px;
  font-family: monospace;
  box-sizing: border-box;
}

.output {
  border: 1px solid #999;
  padding: 1em;
}

.error {
    color: #d00;
    font-family: monospace;
}

Babel + JSX

const Input = Ractive.extend({
	template: `<textarea value='{{document}}'></textarea>`
});

const Output = Ractive.extend({
	template: `<div class='output'>{{{marked(document)}}}</div>`,
  data: { marked }
});

const MarkdownEditor = Ractive.extend({
	template: `
  	<Input/>
   	<Output/>
  `,
  
  components: { Input, Output }
});

const ractive = new MarkdownEditor({
	el: 'main'
});