JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="editor">

		
		
			<h3>Your Text:</h3>
			<input id="input" maxlength="30" type="text" name="Text" value="Max. 30 characters">
		
		<br>
		

		</div>
			

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		viewBox="0 0 1247.2 751.2" enable-background="new 0 0 1247.2 751.2" xml:space="preserve">
	
	
		<rect class="frame" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" width="1247.2" height="751.2"/>
		<rect class="border" x="77.9" y="78.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="1100" height="600"/>
		<path class="picture" fill="none" stroke="#000000" stroke-miterlimit="10" d="M748.8,441.5h-258c-4.7,0-8.5-3.8-8.5-8.5V175c0-4.7,3.8-8.5,8.5-8.5
		h258c4.7,0,8.5,3.8,8.5,8.5v258C757.3,437.7,753.5,441.5,748.8,441.5z"/>
		<path class="picture" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1051.3,441.5h-258c-4.7,0-8.5-3.8-8.5-8.5V175c0-4.7,3.8-8.5,8.5-8.5
		h258c4.7,0,8.5,3.8,8.5,8.5v258C1059.8,437.7,1056,441.5,1051.3,441.5z"/>
		<path class="picture" fill="none" stroke="#000000" stroke-miterlimit="10" d="M445.5,441.5h-258c-4.7,0-8.5-3.8-8.5-8.5V175c0-4.7,3.8-8.5,8.5-8.5
		h258c4.7,0,8.5,3.8,8.5,8.5v258C454,437.7,450.2,441.5,445.5,441.5z"/>
		<text class="text" transform="matrix(2.4428 0 0 1.5 624.6 550.5599)" font-family="'ComicSansMS'" font-size="41.6368">Your words here</text>
		 <!--<foreignObject x="78" y="460" width="1100" height="200" style="color:white;text-align:center">
           <body xmlns="http://www.w3.org/1999/xhtml">
               <p class="text">Your words here</p>
           </body>
		</foreignObject>-->

	</svg>

CSS

body {
	font-family:'Open Sans', tahoma;
	background-color:#F4FFFF;
}

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center;
}

.frame {
	fill:#FFEBCD;
	fill:url(#myLinearGradient1);
	fill:url(#img1);
}

.border {
	fill:#003372;
}

.picture {
	fill:#fff;
	border-radius:20px;
}

svg {
	width:831.5px;
	height:500.8px;
	display:inline-block; 
	margin-left:auto; 
	margin-right: auto;
	float:left;
	margin-left:100px;
	margin-top:20px;
}

h1{
	margin-left:50px;
}

SVG P {
    font-size: 80px;
}

.text {
	fill:white;
	font-family:'Open Sans', sans-serif, verdana;
	text-align:center;
	text-anchor: middle;
	margin:auto;
	z-index:10;
}

.red {
	fill:#FF0000;
}

#editor {
	width:380px;
	height:auto;
	background:#A8E2F1;
	border:1px solid #ccc;
	display:inline;
	float:left;
	margin-left:50px;
	margin-top:20px;
	margin-bottom:20px;
}

#editor h3 {
	margin-left:20px;
}

#pics {
	margin-top:20px;
}
#editor img {
	margin-left:20px;
}

button {
	display:block;
}

.box {
	width:45px;
	height:45px;
	display:inline;
	float:left;
	margin-left:20px;
}

#input {
	display:inline-block;
	float:left;
	margin-left:20px;
}

#purple {
	background:#a077a6;
}

#red {
	background:#8f0711;
}

#blue {
	background:#003372;
}

#natural {
	background:#f4ede5;
}

#sandstone {
	background:#f7cda5;
}

#purple2 {
	background:#a077a6;
}

#red2 {
	background:#8f0711;
}

#blue2 {
	background:#003372;
}

#natural2 {
	background:#f4ede5;
}

#sandstone2 {
	background:#f7cda5;
}

#content_holder {
	width:1380px;
	height:auto;
	margin:0 auto;
}

#pattern1 {
	background-image:url("Images/pattern1.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	-ms-interpolation-mode: bicubic;
}

#pattern2 {
	background-image:url("Images/pattern2.jpg");
	-webkit-background-size: cover;
   ...

JavaScript

$(document).ready (function() {

	$('#input').keyup(function() {
		$('.text').html($(this).val());
	});

});

document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'interactive') {
       document.getElementById('content_holder').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
         document.getElementById('interactive');
         document.getElementById('load').style.visibility="hidden";
         document.getElementById('content_holder').style.visibility="visible";
      },1000);
  }
}