JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">

    <ul class="nav nav-pills" ng-init="catVal = 1">
       <li ng-repeat="item in products" ng-class="{'css-class-yellow' : momentDbTime.diff(item.businessTime, 'minutes') > 60,'css-class-red' : momentDbTime.diff(item.businessTime, 'minutes') > 200, 'css-class-green' : momentDbTime.diff(item.businessTime, 'minutes') > 300 }">
           <a href="">{{item.name}}</a>

        </li>
                       
     </ul>        
</div>

CSS

.css-class-yellow{
  background-color: yellow;
  }
.css-class-red{
  background-color: red;
  }
.css-class-green{
  background-color: green;
  }

JavaScript

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.dbTime='12:05:05';
$scope.momentDbTime = moment($scope.dbTime, 'HH:mm:ss');

  $scope.products = [{
    'name': 'Xbox',
    'clearance': true,
    'price': 30.99,
    'businessTime':moment('04:15:22','HH:mm:ss')
  }, {
    'name': 'Xbox 360',
    'clearance': false,
    'salesStatus': 'old',
    'price': 99.99,
    'businessTime':moment('12:10:22','HH:mm:ss')
  }, {
    'name': 'Xbox One',
    'salesStatus': 'new',
    'price': 50,
    'businessTime':moment('06:25:22','HH:mm:ss')
  }, {
    'name': 'PS2',
    'clearance': true,
    'price': 79.99,
    'businessTime':moment('08:11:22','HH:mm:ss')
  }, {
    'name': 'PS3',
    'salesStatus': 'old',
    'price': 99.99,
    'businessTime':moment('17:41:22','HH:mm:ss')
  }, {
    'name': 'PS4',
    'salesStatus': 'new',
    'price': 20.99,
    'businessTime':moment('21:05:22','HH:mm:ss')
  }];
  });