JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="col-sm-8 col-xxl-6">
                                <textarea placeholder="Enter abstract" class="form-control post-abstract-field" id="pd-post-excerpts" name="pd_post_excerpts" rows="4" cols="50"></textarea>
                                <div class="remaining-character-block pb-2">
                                    <div class="remaining-character-color mt-3">
                                        <div class="remaining-character-track"></div>
                                    </div>
                                    <div class="remaining-character mt-2">180 characters max</div>
                                </div>
                            </div>

CSS

.basic-form textarea.form-control {
	height: auto;
	padding-top: 0.625rem;
}
.remaining-character-block .remaining-character-color {
	display: block;
	height: 0.375rem;
	background-color: #eee;
	border-radius: 1.25rem;
	overflow: hidden;
}
.remaining-character-block .remaining-character-color .remaining-character-track {
	display: inline-block;
	width: 0;
	vertical-align: top;
	height: 0.375rem;
	background-color: #47d047;
	border-radius: 1.25rem;
}
.remaining-character-block .remaining-character {
	font-size: 0.875rem;
	color: #3B3F4E;
	font-weight: 600;
}
.mt-2, .my-2 {
	margin-top: 0.5rem !important;
}

JavaScript

asjQuery(document).ready(function() {
            jQuery('.post-abstract-field').on('input', function() {

                var valLength = this.value.length,
                    maxLength = 180;

                jQuery(".remaining-character-track").width(valLength / maxLength * 100 + "%");
                
                if (this.value.length > maxLength) {
                    jQuery(".remaining-character").html((valLength - maxLength) + " above limit");
                    jQuery(".remaining-character-track").css({
                        backgroundColor: "#ff5959"
                    });
                } else {

                    jQuery(".remaining-character").text((maxLength - valLength) + " Remaining");

                    if (this.value.length > (maxLength / 2)) {

                        jQuery(".remaining-character-track").css({
                            backgroundColor: "#fdb839"
                        });
                    } else {
                        jQuery(".remaining-character-track").css({
                            backgroundColor: "#47d047"
                        });
                    }
                }

            });
        });