JSFiddle - React, Tailwind, and code Playground

HTML

<body onMousemove="" onClick="">
    <label style="position:absolute">	<b>
				<?php 
					echo trad($f_lng,"Objects"); 
				?>
			<b>
		</label>
		<label style="position:absolute; left:100px">
			<b>
				<?php 
					echo trad($f_lng,"Plan de travail"); 
				?>
			<b>
		</label>
		<br>
		
		<!-- ***** rectangle du plan de travaill ***** -->	
		<g style="position:absolute">
			<svg width="900" height="425">		
				<rect id ="objrectangle" x="90" y="20" width="800" height="400" style="fill:yellow; stroke:black; stroke-width:2" />
				<rect x="0" y="20" width="80" height="400" fill=yellow stroke=black  stroke-width:2/>
			</svg> 
		</g>
			
		<!-- SVG objet rectangle rouge -->
		<div id="divrect" onmousedown="start_drag(document.getElementById('divrect'), event);" style="position:fixed; height:100px; width:50px;"> 
			<!--<svg width="50" height="50">-->
			<svg id="svg">	
				<rect id="rect" x="5" y="25" width="50" height="50" stroke="#0E0E0E" style="fill:red; stroke-width:1" />
				 <text id =txtrect x="5" y="35" font-family="Verdana" font-size="11" fill="white" >
					Rect
				 </text>
			</svg> 
		</div>

JavaScript

var x;
        var y;
        var color;
        var id;


        var dragged = null;

        function start_drag(objet, event) {
            dragged = objet;
            if (event.preventDefault) event.preventDefault();
        }

        function drag_onmousemove(event) {
            if (dragged) {
                x = event.clientX;
                y = event.clientY;
                elementHeight = dragged.clientHeight;
                elementWidth = dragged.clientWidth;
                dragged.style.position = 'absolute';
                dragged.style.left = x - elementWidth / 2 + 'px';
                dragged.style.top = y - elementHeight / 2 + 'px';

            }
        }

        function drag_onmouseup(event) {
            dragged = null;
            clone();

        }

        function addEvent(obj, event, fct) {
            if (obj.attachEvent) obj.attachEvent('on' + event, fct);
            else obj.addEventListener(event, fct, true);
        }


        addEvent(document, 'mousemove', drag_onmousemove);
        addEvent(document, 'mouseup', drag_onmouseup);


        //clone object svg
        function clone() {
            var newrect = document.getElementById('svg').cloneNode(true);
            newrect.setAttribute("x", 100);
            newrect.setAttribute("y", 100);
            newrect.style.position = 'absolute';
            newrect.id = 'novoSVG';

            var div = document.createElement('div');
            div.style.height = '100px';
            div.style.width = '50px';
            addEvent(div, 'mousedown', function(e){ start_drag(div, e)});
            div.appendChild(newrect);
            document.body.appendChild(div);
        }