<div class="flex items-center justify-center h-screen bg-gray-200">
	<div class="bg-white rounded-lg border shadow-lg p-4 w-1/5">
    <label class='text-gray-800 font-regular'>Your Comment Here!</label>
    <p class='text-gray-400 text-sm p-0 m-0'>The cursor will change colors as you type!</p>
    <textarea id='comment' maxlength='50' class='bg-gray-200 p-1 h-20 w-full mt-0 good'></textarea>
	</div>
	
</div>
.good {
  caret-color: #10b981;
}

.warning {
  caret-color: #FCD34D;
}

.danger {
  caret-color: red;
}
const textarea = document.getElementById('comment')
const changeCursor = (e) => {
  let {value} = e.target
  let newClass = getRangeColor(e.target.maxLength, value.length)
  
  e.target.classList.remove('good', 'warning', 'danger')
  e.target.classList.add(newClass)
}

const getRangeColor = (maxLen, inputLen) => {
  let range = maxLen / 3
  
  if (between(inputLen, 0, range)) {
    return 'good'
  } else if (between(inputLen, range, range*2)) {
    return 'warning'
  } else {
    return 'danger'
  }
}

const between = (x, min, max) => {
  return x >= min && x <= max;
}

textarea.addEventListener('input', changeCursor);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.