JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<p>the numbers should be bold and blue</p>

<main></main>

<script id='template' type='text/html'>
  <div class='one'>
		a
  </div>

	{{#each list}}
		<div class='two'>{{this}}</div>
	{{/each}}
</script>

CSS

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

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

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

Babel + JSX

var Widget = Ractive.extend({
  template: `#template`,
  css: `
    div { font-weight: bold; }
    .one { color: red; }
    .two { color: blue; }`
});

var ractive = new Widget({
  el: 'main',
  data: {
  	list: [ 1, 2, 3 ]
  }
});