JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Frame</title>

 <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://layout.jquery-dev.net/download/jquery.layout-1.2.0.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js" type="text/javascript"></script> 

<script>

    $(document).ready(function () {

    //$("#center_box").resizable();
    

        }
        );
        
        function addDiv()
        {
           var newContainer=$('<div  class="ui-widget-content" style="display:block;position:absolute;top:50px ;left:100px;width:100px;height:100px;border:1px solid red;"><h3 class="ui-widget-header">Resizable</h3></div>');
           $("body").append(newContainer);
           
           newContainer.draggable(
             {
               //containment:[200,30,800,600],
               stop: function(event,ui)
               {
                 var h=$("#area1").height();
                 var nh=ui.position.top + ui.helper.height();
                 if (nh > h) 
                 {
                   $("#area1").height(nh);
                   $( this).draggable( "option", "containment", [200,30,800,nh] );
                 }
               }
             }
           );
           newContainer.resizable(
           {
                         handles: 'all' ,
                         autoHide: true 
            }                
           );
        }
        
</script>

<style type="text/css">

#north_box {
padding:10px;
       height:20px;
       width:100%;
       background-color:white;
       border:3px solid black;
      ...