JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blogpost">
            <h1 style="margin-left:3%;margin-right:3%">Share your thoughts. Give comments and feedback.</h1>
        <form>
            <textarea class="textarea" rows="2" cols="40" placeholder="What's on your mind?"></textarea>
        </form>
        
            <div class="button-group">
           
                <p class="counter">140</p>
                <a href="#" class="post">Post</a>
            </div>
            
            <!--this is where the posts are prepended-->	
             <ul class="userPosts">
              </ul>
            <!--end of prepend-->
        </div>        
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

CSS

/*blog*/
				#blogpost {
					width: 70%;
					min-width: 500px;
					background: #f9f9f9;
					margin: 0 auto;
					height: 150vh; /*vertical height */
					
				}
				#blogpost h1 {
				float:left;
				clear:left;
				}
				.textarea {
				margin-left: 10%;
				margin-right: 10%;
				width: 80%;
				max-width: 80%;
				height: 110px;
				padding: 1%;
				}
				.button-group {
				float: right;
				margin-top: 15px;
				margin-right: 10%;
				}
				.counter  {
				  display: inline;
				  margin-top: 0;
				  margin-bottom: 0;
				  margin-right: 10px;
				}
				.post {
					background-color: #00bbbb;
					padding: 10px 17px 10px 17px;
					border-radius: 10%;
					font-size: 0.875em;
					font-weight: bold;
					color: white;
				}
				.disabled {
			   pointer-events: none;
			   cursor: default;
			   background-color: #77bbbb;
			}
				
				.post:hover {
					background-color: #00aaaa;
				}
				.userPosts {
				  clear: both;
				  list-style: none;
				  padding-left: 0;
				  width: 80%;
				  margin: 100px 10% 10px 10%;
				}
				
				.userPosts li {
				  background-color: #fff;
				  border: 1px solid #d8d8d8;
				  padding: 10px 20px 10px 20px;
				  word-wrap: break-word;
				  min-height: 42px;
				}
				
			/*end of blog*/

JavaScript

var blog = function(){
		$('.post').click(function(){
			var post = $('.textarea').val();
			$('<li>').text(post).prependTo('.userPosts');
			$('.textarea').val('');
			$('.counter').text(140);
			$('.post').addClass('disabled')
			});
		$('.textarea').keyup(function(){
			var postLength = $(this).val().length;
			var charactersLeft = 140 - postLength;
		
			$('.counter').text(charactersLeft);
			
			 if (charactersLeft < 0)
                    {
                        $('.post').addClass('disabled')
                        }
                else if (charactersLeft === 140)
                    {
                        $('.post').addClass('disabled')
                        }
                else
                    {
                        $('.post').removeClass('disabled')
                        }
			});
		$('.post').addClass('disabled')
	};
	
$(document).ready(blog);
//store the data whenever the an <li> is added to the <ul class="userPosts">