JSFiddle - React, Tailwind, and code Playground

HTML

<label class="col-md-12 pl-0">Description</label>
<div class="col-md-10 pl-0">
  <textarea cols="75" rows="5" class="minchar" maxlength="250" placeholder="Describe this Extra in brief for your guest">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class="rechar"></p>

JavaScript

$('.minchar').on('input', function(e){
    	e.stopPropagation();
      // Get Length
      var txtLength = $(e.currentTarget).val().length;
      // Get Remaining Length
      var txtLengthRemaining = 250 - txtLength;
      // Create HTML String
      var strHtml = txtLengthRemaining+" characters remaining";
      // Fill the String & Color based on below conditions
      if(txtLengthRemaining <= 0) {
      	$('.rechar').css('color', '#E01424').html(strHtml);
      } else if(txtLengthRemaining <= 100) {
      	$('.rechar').css('color', '#CF7721').html(strHtml);
      } else {
      	$('.rechar').css('color', '#737373').html(strHtml);
      }
    });  
    // Trigger event on page load by default.
    $('.minchar').trigger('input');