JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div id="paging1">
  <ul>
    
    <li><!-- item --><h4>With Knockout.js</h4>
        <h6 class="DueDate">
          <div class="progress">
            <div class="bar"></div>
          </div>
          Due in <span class="days-due" data-bind="text: daysDue"></span> days
        </h6>
    </li><!-- #item -->

    <li><!-- item --><h4>Without Knockout.js (manually entering number)</h4>
        <h6 class="DueDate">
          <div class="progress">
            <div class="bar"></div>
          </div>
          Due in <span class="days-due">100</span> days
        </h6>
    </li><!-- #item -->

  </ul>
</div>

JavaScript

// Knockout.js - bring in number of days from json
// -------------------------
// Here's my data model
var viewModel;
$.getJSON('http://echo.jsontest.com/daysDue/50', function (data) {
    viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
});

// Progress Bar - adjust width of progress bar according to number of days
// -------------------------
$('#paging1 ul li').each(function () {
    // progress bar
    // find number of days until due date
    var progBarValue = $(this).find('.days-due').text();
    // limit days due to no more than 100%
    progBarValue = progBarValue > 100 ? 98 : progBarValue;
    // set progress bar width
    $(this).find('.bar').width((100 - progBarValue) +'%');

    // set class of progress bar for color based on days due
    if (progBarValue >= 75) {
       $(this).find('.progress').removeClass('progress-warning progress-danger').addClass('progress-success');
       $(this).find('.DueDate').removeClass('urgent');
    } else  if (progBarValue >= 25 && progBarValue <= 74) {
       $(this).find('.progress').removeClass('progress-success progress-danger').addClass('progress-warning');
       $(this).find('.DueDate').removeClass('urgent');
    } else if (progBarValue <= 24) {
       $(this).find('.progress').removeClass('progress-warning progress-success').addClass('progress-danger');
       $(this).find('.DueDate').addClass('urgent');
    }
});