JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<main></main>

CSS

html, body, main {
  width: 100%;
  height: 100%;
}

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
}

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

svg {
  width: 100%;
  height: 100%;
}

circle {
  fill: purple;
  stroke: none;
}

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

Babel + JSX

const lookup = {
	AL: { name: 'Alabama' },
	AK: { name: 'Alaska' },
  AZ: { name: 'Arizona' },
  AR: { name: 'Arkansas' }
};

const StateWithComputed = Ractive.extend({
	template: '<p>state name: {{excitingName}}</p>',

	computed: {
  	info () {
    	return lookup[ this.get( 'id' ) ];
    },
    
    excitingName () {
    	return this.get( 'info' ).name.toUpperCase() + '!!!';
    }
  }
});

const StateWithInit = Ractive.extend({
	template: '<p>state name: {{excitingName}}</p>',
  
  computed: {
  	excitingName () {
    	return this.get( 'info' ).name.toUpperCase() + '!!!';
    }
  },

	oninit () {
  	const info = lookup[ this.get( 'id' ) ];
  	this.set( 'info', info );
  }
});

const ractive = new Ractive({
	el: 'main',
  
  template: `
  	<StateWithComputed id='AL'/>
   	<StateWithComputed id='AK'/>
  `,
  
  components: { StateWithComputed, StateWithInit }
});