JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
	.draggable 
	{  
		padding: 10px; 
		box-shadow: 0px 0px 4px 0px #444; 
		text-align: left;
	}
	.bar{
		background-color: #222;
		margin-bottom: 30px;
		height: 30px;
		margin-top: -10px;
		margin-left: -9px;
		width: 103%;
	}
  </style>
  <script>
  $(function() {
	  
    
  });
  
  $(document).ready(function(){
	  

	creerFenetre(480,360);
  	 $( '.draggable' ).draggable();
 });
 
 
  var fermerFenetre = function(elm){
	 
	var fenetre = $( "#"+elm.id ).parent().parent();
	fenetre.css("display", "none");
	
 }
 
 var creerFenetre = function(pixelW, pixelH){
	 
		var numberID = Math.floor((Math.random() * 8999) + 1000);
		var hauteurBar = 30;
		$( "body" ).prepend( ' <center>\
			<div id="draggable'+numberID+'" class="ui-widget-content draggable"> \
				<div id="bar'+numberID+'" class="bar" style="background-color:#222;margin-bottom:'+hauteurBar+'px;"> \
					<img id="croix'+numberID+'" onclick="fermerFenetre(this)"...