JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<textarea class="user_response" cols="30" rows="10"></textarea>
    <div id="texty"></div>

CSS

span.error {
         color: red;
        }

JavaScript

$(document).ready(function(){
            var txtarea      = $('.user_response');

	    var wordslimit = 20;
            var texty = $("#texty");
            txtarea.on('keyup', function(){
                if($(this).val().length > wordslimit){
                    cleanText = $(this).val().slice(0, wordslimit);
                    errorText = $(this).val().slice(wordslimit, $(this).val().length);
                    errorText = "<span class='error'>" + errorText + "</span";
                    textAreaText = cleanText + errorText;
                    texty.html(textAreaText);
                } else {
                    txtarea.html($(this).val());
                }
                texty.html($txtarea.val());
            });
        });