JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/classdojo/bindable.js/master/build/bindable.js"></script>
<script type="text/javascript" src="https://rawgithub.com/classdojo/paperclip.js/4af2e4a03fec72b85654e5fbcf28ce7ea2c2e3f2/build/paperclip.js"></script>
<script type="text/javascript" src="https://rawgithub.com/classdojo/paperclip.js/4af2e4a03fec72b85654e5fbcf28ce7ea2c2e3f2/build/paperclip-compiler.js"></script>

<script type="text/x-paperclip" data-template-name="hello-world">
    
    how hot is it (fahrenheit)?: <input type="text" name="temp" data-bind="{{ model: this }}"></input> <br />
    
    <strong data-bind="{{ 
      css: {
          cool    : temp > 0 || !temp,
          warm    : temp > 60,
          hot     : temp > 90
      } 
    }}">
        {{
            temp > 60 ?
            temp > 90 ? "it's hot" : "it's warm" : 
            "it's cool"
        }}
    </strong>
</script>

<div id="application"></div>

CSS

.cool {
    color: green;
}

.warm {
    color: orange;
}

.hot {
    color: red;
}

JavaScript

//turn the script into a template
var template = paperclip.template("hello-world");

//the model data we're binding to
var model = new bindable.Object({ temp: 70 });

model.set("this", model);

//bind to the template, and attach to the application
$("#application").append(template.bind(model).render());