JSFiddle - React, Tailwind, and code Playground

by evschris

HTML

<!-- you can change this to ractive@edge for the latest published edge build
     or to a specific version e.g. ractive@0.7.3 -->
<script src="https://unpkg.com/ractive"></script>

<script type="text/html" id="template">
	<h1>Hello {{who}}!</h1>
  <p>We are ready for some bugs!</p>
</script>

<div id="main"></div>

CSS

#main > h1, #main > p {
  text-align: center;
}

Babel + JSX

// if you change your console context to "result", you can interact with
// your Ractive instance with the glboal "r"
const r = window.r = new Ractive({
	el: '#main',
  template: '#template',
  data: {
  	who: 'World'
  }
});