JSFiddle - React, Tailwind, and code Playground

by designerPrasanna

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
<div class="wrap">
     <div id="draggable" class="ui-widget-content">
          <div id="draggable-header">
               <p class="ui-widget-header">Note name1</p>
          </div>
     </div>
     <div>
          <textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea>
     </div>

     <div id="draggable" class="ui-widget-content">
          <div id="draggable-header">
               <p class="ui-widget-header">Note name2</p>
          </div>
     </div>
     <div>
          <textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea>
     </div>
</div>

CSS

.wrap {
    width: 77vw;
    height: 87vh;
}

#draggable{
    width: 300px;
    height: 300px;
    position: absolute;
    background: rgb(227, 250, 150);
    border: none;
    border-radius: 5px 5px 0px 0px;
}

#draggable p {
    cursor: move;
}

#draggable-header p{
    background: rgb(80, 80, 80);
    height: 30px;
    width: 300px;
    color: white;
    font-weight: 500;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
}

#draggable textarea{
    background: transparent;
    resize: none;
    padding: 5px;
    padding-left: 10px;
    width: 300px;
    height: 300px;
    border: none;
    font-weight: 500;
}

JavaScript

$(function () {
    $(".ui-widget-content").draggable({
        containment : 'parent',
        handle: "p",
        start: function (event, ui) {
            $(this).css('background-color', 'rgb(221, 251, 120);');
        },
        stop: function (event, ui) {
            $(this).css('background-color', 'rgb(227, 250, 150)');
        }
    });
    $("div, p").disableSelection();
});