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.card}>
        <View style={styles.header}>
          <View style={styles.profilePicture} />
          <View style={{flex: 1}}>
            <Text style={styles.name}>Christopher Chedeau</Text>
            <Text style={styles.subtitle}>August 28 at 9:46pm &middot; Paris, France</Text>
          </View>
        </View>
        <View>
          <Text>'react js' search on Twitter returns 96 results in the past 24 hours. I declare bankruptcy!</Text>
          <Text style={styles.bling}>Like &middot; Comment &middot; Share</Text>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  card: {
    margin: 15,
    padding: 8,
    borderWidth: 1,
    borderColor: '#cccccc',
    borderRadius: 3
  },
  profilePicture: {
    width: 40,
    height: 40,
    backgroundColor: '#cccccc',
    marginRight: 8,
    marginBottom: 8,
  },
  name: {
    color: '#3B5998',
    fontWeight: 'bold',
    marginBottom: 2,
  },
  subtitle: {
    fontSize: 12,
    color: '#9197A3',
  },
  header: {
    flexDirection: 'row',
  },  
  bling: {
    marginTop: 8,
    color: '#6D84B4',
    fontSize: 13,
  },
});



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