JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<button data-bind="click:increaseLevel">increase importance</button>
<div data-bind="style:{width:importanceWidth}" id="importanceBar"></div>
<br />
<div data-bind="style:{width:importanceWidth}" id="importanceBar2"></div>

CSS

#importanceBar{
    height:20px;
    background-color:green;
}

#importanceBar2{
    height:10px;
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/d/d5/Blue_Circle_o.jpg');
    background-size:10px 10px
}

JavaScript

var VM = function(){
    var self = this;
    self.importanceLevel = ko.observable(53);
    self.importanceWidth = ko.computed(function(){
       return (self.importanceLevel() * 2) + "px" 
    });
    self.increaseLevel = function(){
        self.importanceLevel(self.importanceLevel() + 10);
    }    
}

ko.applyBindings(new VM());