JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

input {
    width: 6em;
    text-align: right;
}

JavaScript 1.7

/**
 * @jsx React.DOM
 */

var NumberField = React.createClass({
    render: function() {
        return <input type="number" value={this.props.value} onInput={this.onInput}/>;
    },
    onInput: function(e) {
        if (!this.props.onValueChange) {
            return;
        }
        var value = parseInt(e.target.value, 10);
        return this.props.onValueChange(value);
    }
});


var TempConverter = React.createClass({
    getInitialState: function() {
        return {type: "c", val: 0};
    },
    render: function() {
        var c, f;
        if (this.state.type === "c") {
            c = this.state.val;
            f = c2f(c);
        } else {
            f = this.state.val;
            c = f2c(f);
        }

        return <p>
            <NumberField onValueChange={this.onChangeC} value={c}/> C
            <br/>
            <NumberField onValueChange={this.onChangeF} value={f}/> F
        </p>;
    },
    onChangeC: function(c) {
        this.setState({type: "c", val: c});
    },
    onChangeF: function(f) {
        this.setState({type: "f", val: f});
    }
});


function c2f(c) {
    return 1.8 * c + 32;
}
function f2c(f) {
    return 0.5555555555555 * (f - 32);
}


ReactDOM.render(
    <TempConverter/>,
    document.getElementById('temp_converter')
);