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

var ractive = new Ractive({
  el: 'main',
  template: `
  	<label><input type='range' min='1' max='200' value='{{r}}'> radius: {{r}}px</label>
    
    <p>diameter: {{diameter}}px</p>
    <p>area: {{area.toFixed(1)}}px<sup>2</sup></p>
    
    <svg>
      <circle cx='{{r}}' cy='{{r}}' r='{{r}}'/>
    </svg>`,
  data: {
    r: 50
  },
  
  computed: {
  	diameter () {
    	return this.get( 'r' ) * 2;
    },
    
    area () {
    	return Math.PI * Math.pow( this.get( 'r' ), 2 );
    }
  }
});