JSFiddle - React, Tailwind, and code Playground

by infatti

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<ul data-bind="foreach: dueDays">
  <li>
    <span class="days-due" data-bind="text: dueDays"></span> days due
    <div class="bar" data-bind="attr: { style: barWidth }"></div>
  </li>
  <li>
    <span class="days-due" data-bind="text: dueDays"></span> days due
    <div class="bar" data-bind="attr: { style: barWidth }"></div>
  </li>
</ul>

CSS

.bar {
    background:red;
    height:10px;
}

JavaScript

// Here's my data model
var viewModel;
   $.getJSON('http://echo.jsontest.com/dueDays/50', function (data) {
    viewModel = ko.mapping.fromJS(data);   
    viewModel.barWidth = "width: " + data.dueDays + "px;";
    ko.applyBindings(viewModel);
});