JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<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;
}

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

Babel + JSX

const MatrixInput = Ractive.extend({
	template: `
  	<div class='matrix-input'>
      <div class='row'>
        <input type='number' value='{{matrix[0]}}'>
        <input type='number' value='{{matrix[2]}}'>
        <input type='number' value='{{matrix[4]}}'>
      </div>
      <div class='row'>
        <input type='number' value='{{matrix[1]}}'>
        <input type='number' value='{{matrix[3]}}'>
        <input type='number' value='{{matrix[5]}}'>
      </div>
    </div>
  `,
  css: `
  	.matrix-input {
    	margin: 0 0 1em 0;
    }
    
    input {
      width: 4em;
      padding: 0.5em;
      box-sizing: border-box;
      font-size: inherit;
      font-family: inherit;
    }
  `
});

const MatrixOutput = Ractive.extend({
	template: `
  	<div class='row'>
    	<span>{{result[0]}}</span>
      <span>{{result[2]}}</span>
      <span>{{result[4]}}</span>
    </div>
    <div class='row'>
    	<span>{{result[1]}}</span>
      <span>{{result[3]}}</span>
      <span>{{result[5]}}</span>
    </div>
  `,
  css: `
  	span {
      display: inline-block;
      width: 4em;
      padding: 0.5em;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }
  `,
  computed: {
  	result () {
    	const left = this.get( 'left' );
     	const right = this.get( 'right' );
      
      return multiply( left, right );
    }
  }
});

const MatrixCalculator = Ractive.extend({
	template: `
  	<MatrixInput matrix='{{left}}'/>
    <MatrixInput matrix='{{right}}'/>
    
    <MatrixOutput left='{{left}}' right='{{right}}'/>
  `,
  components: { MatrixInput, MatrixOutput }
});

var ractive = new MatrixCalculator({
  el: 'main',
  data: {
    left: [ 1, 0, 0, 1, 0, 0 ],
    right: [ 1, 0, 0, 1, 0, 0 ]
  }
});

function multiply ( [ a1, b1, c1, d1, e1, f1 ], [ a2, b2, c2, d2, e2, f2 ] ) {
	return [
		( a1 * a2 ) + ( c1 * b2 ),      // a
		( b1 * a2 ) + ( d1 * b2 ),      // b
		( a1 * c2 ) + ( c1 * d2 ),      // c
		( b1 * c2 ) + ( d1 * d2 ),      // d
		( a1 * e2 ) + ( c1 * f2 ) + e1, //...