JSFiddle - React, Tailwind, and code Playground

by evan

HTML

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

CSS

.channel, .thumb {
    vertical-align: center;
    padding: 0;
    margin: 0;
}

.channel {
    width: 200px;
    height: 12px;
    background: blue;
}

.thumb {
    width: 12px;
    height: 12px;
    background: red;
}

JavaScript 1.7

var Thumb = React.createClass({
    render: function() {
        return <div className="thumb" />;
    }
});

var Channel = React.createClass({
    render: function() {
        return <div className="channel">{this.props.children}</div>;
    }
});

var Slider = React.createClass({
    render: function() {
        return <Channel><Thumb /></Channel>;
    }
});
 
React.render(<Slider  />, document.body);