JSFiddle - React, Tailwind, and code Playground

HTML

<textarea rows="4" cols="50" id="txtArea">
    Test
</textarea>

CSS

.customTextAreaClass{
    background-color:#fff;
    width:"565px";
    color:#ff0000;
    height:120px;
    padding-left:1px;
    paddingTop:1px;
    font-family:Tahoma;
    font-size:10pt;
    border:"groove 4px #e5eaf1";
    position: inherit;
    text-decoration:none;  
}

JavaScript

$(document).ready(function() {

    $('#txtArea').on("focus", function(event) {
        
        if(!$('#txtArea').hasClass('customTextAreaClass')){
            
            $('#txtArea').addClass('customTextAreaClass');
            
        }
    });
    
    $('#txtArea').on("blur", function(event) {
        
        if($('#txtArea').hasClass('customTextAreaClass')){
            
            $('#txtArea').removeClass('customTextAreaClass');
            
        }
    });
});