JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="profit" data-bind="text: profit, css: { 'highlight-red': profit()<10 }">
    
</div>
<br /><br />
Profit:
<span id="profitPercentage" data-bind="text: profit, css: profitClass">
    
</span>

CSS

body
{
    font-family: Arial;
}

.highlight-red
{
    color: Red;
}

.highlight-green
{
    color: Green;
}

JavaScript

// CSS Binding

// Our viewmodel with observables
function viewmodel() {
    self = this;
    
    this.profit = ko.observable(17);
    
    this.profitClass = ko.computed(function(){
        if(self.profit()<10)
            return 'highlight-red';
        else
            return 'highlight-green';
    });
}

// Runs at document load
$(document).ready(function(){
    // Create an instance of the viewmodel
    var myViewmodel = new viewmodel();
    
    // Bind the instance to the view
    ko.applyBindings(myViewmodel);
});