JSFiddle - React, Tailwind, and code Playground

by drdrace

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body {
  padding: 0;
  margin: 0;
  font-family: Helvetica;
  font-size: 14px;
  font-weight: 100;
}

div, span {
  box-sizing: border-box;
  position: relative;
  border: 0 solid black;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
}

JavaScript 1.7

/** @jsx React.DOM */
var StyleSheet = { create: function(e) { return e; } };
var View = React.DOM.div;
var Text = React.DOM.span;

var StyleDemo = React.createClass({
  render: function() {
    return (
      <View style={{flexDirection: 'row', alignItems: 'stretch', backgroundColor:'blue', justifyContent: 'center'}}>
          <View style={{width: 50, backgroundColor: 'green'}}>
              <Text>Square</Text>
          </View>
          <View style={{width: 50, backgroundColor: 'red'}}>
              <Text>Square</Text>
              <Text>Square</Text>
          </View>
      </View>
    );
  }
});

React.renderComponent(<div style={{width: '100vw', height: '100vh'}}><StyleDemo /></div>, document.body);