JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html style="margin:0px; width:100%;">
	<head>
		<script type="text/javascript">
			function Rectangle(w, h, x, y)
			{
				function updateOrigin()
				{
					me.o = 
					{ 
						x : (me.a.x + me.c.x) / 2.0,
						y : (me.a.y + me.c.y) / 2.0
					};
				}
			
				var me = this;
				me.a = { x : x , y : y };
				me.b = { x : x , y : y + h };
				me.c = { x : x + w , y : y + h };
				me.d = { x : x + w , y : y };
				updateOrigin();
				
				
				function rotatePoint(point, angle, origin)
				{
					var a = angle * Math.PI / 180.0;
					var sina = Math.sin(a);
					var cosa = Math.cos(a);

					var p = 
					{
						x : origin.x + cosa * (point.x - origin.x) - sina * (point.y - origin.y),
						y : origin.y + sina * (point.x - origin.x) + cosa * (point.y - origin.y)
					}
					
					return p;

				}
				
				function pointPos(a, b, point)
				{
					return Math.sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
				}
				
				
				me.Rotate = function(angle, origin)
				{
					var o = origin || me.o;
					me.a = rotatePoint(me.a, angle, o);
					me.b = rotatePoint(me.b, angle, o);
					me.c = rotatePoint(me.c, angle, o);
					me.d = rotatePoint(me.d, angle, o);
					if (o != me.o)
						updateOrigin();
				}
				
				me.ContainsPoint = function(point)
				{
					return 	(pointPos(me.a, me.b, point) <= 0) &&
							(pointPos(me.b, me.c, point) <= 0) &&
							(pointPos(me.c, me.d, point) <= 0) &&
							(pointPos(me.d, me.a, point) <= 0) ;
				}
				
				me.ContainsRectangle = function(rectangle)
				{
					return 	(me.ContainsPoint(rectangle.a)) &&
							(me.ContainsPoint(rectangle.b)) &&
							(me.ContainsPoint(rectangle.c)) &&
							(me.ContainsPoint(rectangle.d)) ;
				}
			}
			
			function DrawRectangle(r, color, ctx)
			{
				var backupStrokeStyle = ctx.strokeStyle;
				var backupFillStyle = ctx.fillStyle;
				
				ctx.beginPath();
				ctx.moveTo(r.a.x, r.a.y);
				ctx.lineTo(r.b.x, r.b.y);
				ctx.moveTo(r.b.x,...