JSFiddle - React, Tailwind, and code Playground

HTML

<form id="downPaymentForm">
                      <label for="downPayment" class="form-control-label dpl">Down Payment</label>
                      <input type="number" class="form-control" id="downPayment" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>
                  
                      <label for="manufacturerRebate" class="form-control-label mrl">Manufacturer Rebate</label>
                      <input type="number" class="form-control" id="manufacturerRebate" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>
                   
                      <label for="tradeInValue" class="form-control-label tivl">Trade-In Value</label>
                      <input type="number" class="form-control" id="tradeInValue" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>
                     
                  </form>
<br>
<div class="progress">
<div class="progress-bar" style="width: 90%;">
<div class="progress-bar progress-bar-success" style="width: 80%;">
<div class="progress-bar progress-bar-secondary" style="width: 20%;"></div>
</div>
</div>

CSS

.progress {
  height: 1.5625em;
  margin-bottom: 0.5em;
  overflow: hidden;
  background-color: #e5e5e5;
  border-radius: 0.0725em;
  text-align: center;
}

/*  The actual progress bar itself */
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  color: white;
  background-color: #0088cc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.progress-bar-secondary {
  background-color: gray;
}

.progress-bar-success {
  background-color: #377f31;
}

.progress-bar-danger {
  background-color: #880e14;
}

.progress-bar-warning {
  background-color: #dba909;
}

JavaScript

// When the <input>'s value changes
$("#downPayment").change(function() {

// If the value is less than 7, add a red border
if ($(this).val() < 28435) {
    $(".progress-bar-secondary").css("width","10%");
}

// Else if the value is equal to 7, add a green border
else if ($(this).val() == 28435) {
    $(".progress-bar-secondary").css("width","20%");
}

// Else if the value is greater than 7, add an orange border
else if ($(this).val() > 28435) {
    $(".progress-bar-secondary").css("width","40%");
}

// Else if the value is anything else, add a black border
else {
    $(".progress-bar-secondary").css("width","20%");
}

});