JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body bgcolor="#0756250">
<font color="white">
Main body Website, without the Div<p>
</font>

<div id="window1" class="window ui-draggable ui-resizable" style="height: 400px;width: 70%;background-color: white;border: 3px solid #000;overflow: hidden;position: absolute;top: 100px;left: 100px;">
<div class="titlebar" style="height: 30px;width: 100%;background-color: blue;">
Draggable and Resizabe Window
</div>
<div class="window-main text" style="height: 100%;background-color: yellow;border: 3px solid #FFF;overflow: scroll">
STUFF inside the main Window Div
<p>
More STUFF
<p>
More STUFF
<p>
--------------
<p>
More STUFF
<p>
</div>
<div style="background: grey;height: 15px;position: absolute;bottom: 0px;">Footer</div>
</div>
<p>
<div id="window2" class="window ui-draggable ui-resizable" style="height: 300px;width: 60%;background-color: white;border: 3px solid #000;overflow: hidden;position: absolute;top: 230px;left: 200px;">
<div class="titlebar" style="height: 30px;width: 100%;background-color: blue;">
Draggable and Resizabe Window
</div>
<div class="window-main text" style="height: 100%;background-color: grey;border: 3px solid #FFF;overflow: scroll">
STUFF inside the 2nd Window
<p>
More STUFF
<p>
More STUFF
<p>
--------------
<p>
More STUFF
</div>
<div style="background: grey;height: 15px;position: absolute;bottom: 0px;">Footer</div>
</div>
<p>
<div id="window3" class="window ui-draggable ui-resizable" style="height: 200px;width: 80%;background-color: white;border: 3px solid #000;overflow: hidden;position: absolute;top: 300px;left: 300px;">
<div class="titlebar" style="height: 30px;width: 100%;background-color: blue;">
Draggable and Resizabe Window
</div>
<div class="window-main text" style="height: 100%;background-color: red;border: 3px...

JavaScript

$( function() {
    $( ".ui-draggable" ).draggable({ cancel: '.text' });
    $( ".ui-resizable" ).resizable(); 
  } );

$('.window').click(function(){
    $('.ui-front').removeClass('ui-front');
    $(this).addClass('ui-front');
});

function myFunc(id) {
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}