JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Dynamic Vector Diagram</title>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>	
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript" src="saveSvgAsPng.js"></script>
    
	<script> 
		function savepng(){
				saveSvgAsPng(document.getElementById("mySVG"), "diagram.png", 3);
			}
			
	 </script> 	
</head>
<body >   
		
		 <a id="myLink" title="Click to do something" href="#" onclick="savepng();return false;">save</a>
	 <div id="theSVG">  
	 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="mySVG" viewBox="-100 -90 200 200" height="600" width="700">
	<defs>
		<marker refY="0.5" refX="0.0" markerHeight="4" markerWidth="2" orient="auto" id="head">
			<!-- triangle pointing right (+x) -->
			<path fill="#D0D0D0" d="M0,0 L0.5,0.5 L0,1 L-0.5,0.5 Z"/>
		</marker>

		<marker refY="0.6" refX="0.1" markerHeight="4" markerWidth="2" orient="auto" id="tail">
			<!-- triangle pointing right (+x) -->
			<path fill="white" d="M0 0 V1.3 L0.6 0.6 Z"/>
		</marker>
	</defs>


	<path id="myArrow" marker-start="url(#tail)" marker-end="url(#head)" d="M -66.38265586443396 22.21132594835645 A 70 70 0 0 0 66.38265586443396 22.21132594835645" fill="none" stroke="#D0D0D0" stroke-width="8"/>
	<text id="myText" x="-14.999999999999995" y="-80" transform="rotate(0 4.898587196589413e-15,-80)" font-family="Calibri" font-size="8" font-weight="bold" fill="#D0D0D0">text</text>
	<image x="60" y="-25" width="50" height="50" xlink:href="http://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg"/>
	<path id="myArrow" marker-start="url(#tail)" marker-end="url(#head)" d="M 66.38265586443396 -22.211325948356432 A 70 70 0 0 0 -66.38265586443396 -22.211325948356436" fill="none" stroke="#D0D0D0" stroke-width="8"/>
	<text id="myText" x="-14.999999999999995" y="80" transform="rotate(180 4.898587196589413e-15,80)" font-family="Calibri" font-size="8" font-weight="bold"...