JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn2">new div</button>
<br/>
<div id="container"></div>
<div id="c" contenteditable=true>g</div>

CSS

.resize {
  background-color: #29e;
  
  
  
  border: 2px solid;

  width: 100px;
  height: 100px;
}
#container {
  box-shadow: 4px 0px 18px -1px #0000ff;
  width: 700px;
  height: 500px;
}
.selected {
  border: 1px dotted black;
  /*box-shadow:0px 0px 10px rgba(0,0,0,0.5);*/
}
.content{
    width: 50px;
    height: 70px;
}
.text{
    width: 50px;
    height: 70px;
}

JavaScript

$(document).ready(function() {
  var dname_id = 1;
  $("#btn2").click(function() {

    var dynDiv = $('<div class="content resize"><div class="text" contenteditable=true></div></div>');
     

    $('#container').append(dynDiv);
    //-------------------------------------------------------//
    dynDiv.resizable({
      ghost: true
    })
    dynDiv.draggable({
      containment: 'parent'
    });

    dynDiv.click(function(event) {
            event.stopPropagation();

     /*$('.selected').removeClass('selected');
      $(this).addClass('selected');*/
     
 /*$('.selected').attr('contenteditable', 'true' )*/



    });
  });
  /*--------------------------------------------*/

});