JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> d
<head> 
    <title>Dojo parent constraint test</title> 
    <style type="text/css"> d
        @import "../../resources/dojo.css";
         @import "js/dojox/widget/Portlet/Portlet.css";
        body {
            padding: 1em;
        }
 
        .moveable {
            background: #FFFFBF;
            border: 2px solid black;
            width: 300px;
            padding: 10px 20px;
            cursor: pointer;
        }
 
        .parent {
            background: #BFECFF;
            border: 10px solid lightblue;
            width: 500px;
            height: 500px;
            padding: 10px;
            
            margin: 10px;
        }
    </style> 
            <style type="text/css">
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Portlet/Portlet.css";
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/layout/resources/GridContainer.css";
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Calendar/Calendar.css";
            .dndDropIndicator { border: 2px dashed #99BBE8; cursor:default; margin-bottom:5px;
            }
        </style>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    <style type="text/css">
    @import "js/dojox/widget/Portlet/Portlet.css";
    
    </style>

    <script type="text/javascript"> 
        dojo.require("dojo.dnd.move");
        dojo.require("dojox.layout.FloatingPane");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.dijit");
                dojo.require("dojox.widget.Portlet");
            
        var m1, m2;
        var init = function(){
            m1 = new dojo.dnd.move.parentConstrainedMoveable("moveable1", {area: "margin", within: true});
            m2 = new...