JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="switch"></div>

CSS

.button {
    display: block;
    height: 100px;
    width: 100px;
    border: 1px solid #aaa;
    border-radius: 25px;
    font: bold 20px Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    color: #fff;
    background-color: #000;
}
.button.on {
    color: #00FF00;
    background-color: #006600;
}

JavaScript 1.7

var Switch = React.createClass({
    getInitialState: function() {
        return {
            on: false
        };
    },
    toggleOnOff: function(e) {
        this.setState({on: !this.state.on});
    },
    render: function() {
        var text = this.state.on ? "ON" : "OFF";
        var className = this.state.on ? "on" : "";
        className += " button"
        
        return <div className={className} onClick={this.toggleOnOff}>{text}</div>;
    }
});

React.render(<Switch/>, document.getElementById("switch"));