JSFiddle - React, Tailwind, and code Playground

by Sandeep Nayak

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
  

  
  <div id="greenBox" class="ui-widget2"> 
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  </div>
  <p></p>
  <div id="orangeBox" class="ui-widget"> 
  <p>This is the Orange Box</p>
  </div>

CSS

.ui-widget {
        background: orange;
        border: 1px solid #DDDDDD;
        color: #333333;
     }
     .ui-widget2 {
        background: #cedc98;
        border: 1px solid #DDDDDD;
        color: #333333;
     }
     #orangeBox { width: 300px; height: 150px; padding: 0.5em;
        text-align: center; margin: 0;border:2px solid black; }
     #greenBox { width: 340px; height: 150px; padding: 0.5em;
        text-align: center; margin: 0; border:2px solid black;}

JavaScript

$(function() {
        $( "#orangeBox" ).resizable({
        	handles:'n'
        });
     });