JSFiddle - React, Tailwind, and code Playground

by vjeux

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={styles.container}>
        <Text>{'text wrapper with flexDirection: row'}</Text>
        <View style={styles.wrapperRow}>
          <Text style={{backgroundColor: 'red'}}>
            {'你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？'}
          </Text>
        </View>
        <View style={styles.wrapperRow}>
          <Text style={styles.text}>
            {'왜 그렇게 부러?'}
          </Text>
        </View>
        <View style={styles.wrapperRow}>
          <Text style={styles.text}>
            {'Why are you so broken?'}
          </Text>
        </View>

        <Text>{'normal text wrapper'}</Text>
        <View style={styles.wrapper}>
          <Text style={styles.text}>
            {'你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？你为什么这么破？'}
          </Text>
        </View>
        <View style={styles.wrapper}>
          <Text style={styles.text}>
            {'왜 그렇게 부러?'}
          </Text>
        </View>
        <View style={styles.wrapper}>
          <Text style={styles.text}>
            {'Why are you so broken?'}
          </Text>
        </View>
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    padding: 10,
    paddingTop: 30,
  },
  text: {
    backgroundColor: 'red',
  },
  wrapper: {
    backgroundColor: 'gray',
    padding: 5,
    margin: 5,
  },
  wrapperRow: {
    flexDirection: 'row',
    backgroundColor: 'gray',
    padding: 5,
    margin: 5,
  },
});


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