JSFiddle - React, Tailwind, and code Playground

HTML

<button id='new'>New</button>

CSS

textarea {
    height:100%;
    background-color:white;
    width:100%;
    resize:none; border:none;
    padding:0px; margin:0px;
    outline:none;
    
}
div { padding:0px; }

JavaScript

$(function() {
$('#new').click(function() {
    var new_offset = {top:30, left:40};
	var new_width = 200;
	var new_height = 150;
	var newElement$ = $('<div><textarea id="textarea"></textarea></div>')
                                    .width(new_width)
						   			.height(new_height)
                                    .draggable({
                                        cancel: "text",
                                        start: function (){
                                            $('#textarea').focus();
                                         },
                                        stop: function (){
                                            $('#textarea').focus();
                                         } 
                                     })
                                    .resizable()
									.css({
											'position'	        : 'absolute',
											'background-color'  : 'yellow',
											'border-color'      : 'black',
											'border-width'      : '1px',
											'border-style'	    : 'solid'
								     })
									 .offset(new_offset)
						             .appendTo('body');
            });
              
});