JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.3.0/cloudinary-jquery-file-upload.min.js"></script>
<!--  Framers Pointe  --->
Width: <input id="width" type="text" value="1024"><br>
Height: <input id="height" type="text" value="768"><br>
Image public_id: <input id="image" type="text" value="ci2wm5ekamuiwjfmhsfv"><br>
Frame public_id: <input id="frame" type="text" value="Frames:M1772388"><br>
Frame size (pixels): <input id="thickness" type="text" value="96"><br>
Matt 1 public_id: <input id="matt1_pub_id" type="text" value="Mats:B878526"><br>
Matt 2 public_id: <input id="matt2_pub_id" type="text" value="Mats:B928156"><br>
Matt 1 size (pixels): <input id="matt1_size" type="text" value="100"><br>
Matt 2 size (pixels): <input id="matt2_size" type="text" value="100"><br>
Thumbnail (pixels): <input id="thum_size" type="text" value="500"><br>
Canvas public_id: <input id="canvas_pub_id" type="text" value="canvas1"><br>
Canvas padding (pixels): <input id="canvas_pad_size" type="text" value="100"><br>
Canvas padding color: <input id="canvas_pad_color" type="text" value="black"><br>
Canvas sides width (pixels): <input id="canvas_side_width" type="text" value="100"><br>
<button>Go</button>

<br><br>
<!--<img class="reference" src="http://res.cloudinary.com/cloudinary-roni/$width_2000,$height_1335,$thickness_103/c_fill,w_$width,h_$height/l_frame,w_$width,h_$thickness/g_north,fl_layer_apply/l_frame,w_$width,h_$thickness/c_lpad,w_$width,h_$height,g_north/a_180/fl_layer_apply/l_frame,w_$height,h_$thickness/c_lpad,w_$height,h_$width,g_north/a_90/l_triangle,w_$thickness/a_180/g_north_east,e_cut_out,fl_layer_apply/l_triangle,w_$thickness/a_90/g_south_east,e_cut_out,fl_layer_apply/fl_layer_apply/l_frame,w_$height,h_$thickness/c_lpad,h_$width,w_$height,g_north/a_-90/l_triangle,w_$thickness/a_-90/g_north_west,e_cut_out,fl_layer_apply/l_triangle,w_$thickness/g_south_west,e_cut_out,fl_layer_apply/fl_layer_apply/coffee-cup"/>
-->
Site preview...

CSS

.reference{
  width: 20%;
}

#new{
  max-width: 80%;
}

img{
  max-width:80%;
}

input{
  margin: 3px;
}

JavaScript

$.cloudinary.config({cloud_name: "michaels-stores"});

$('button').click(function(){
	var width = parseInt($('#width').val());
  var height = parseInt($('#height').val());
//  var frame = $('#frame').val();
	var image = $('#image').val();
  var frameLT = $('#frame').val()+'TL';
  var frameBR = $('#frame').val()+'BR';
  var thickness = parseInt($('#thickness').val());
  var matt1_pub_id = $('#matt1_pub_id').val();
  var matt2_pub_id = $('#matt2_pub_id').val();
  var matt1_size = matt1_pub_id.length > 0 ? parseInt($('#matt1_size').val()) * 2 : 0;
  var matt2_size = matt2_pub_id.length > 0 ? parseInt($('#matt2_size').val()) * 2 : 0;
  var thumb_size = parseInt($('#thum_size').val());
  var canvas_pub_id = $('#canvas_pub_id').val();
  var canvas_pad_size = parseInt($('#canvas_pad_size').val());
  var canvas_pad_color = $('#canvas_pad_color').val();
  var canvas_side_width = parseInt($('#canvas_side_width').val());

  var transformation = [
    // Resizing the image
    //{width: width, height: height, crop: "fill"},
		{crop:"crop",x: 0, y:0, width:width, height: height //border:"9px_solid_rgb:cccccc"}
    }
  ];
  // Underlaying the first matt
	if (matt1_pub_id.length > 0) {
		transformation.push({underlay: matt1_pub_id, width: (width + matt1_size-20 ), height: (height + matt1_size-20)});
		transformation.push({flags: "layer_apply"});
	}
	// Underlaying the second matt
	if(matt2_pub_id.length > 0) {
  transformation.push({underlay: matt2_pub_id, width: (width + matt1_size + matt2_size), height: (height + matt1_size + matt2_size)});
  transformation.push({flags: "layer_apply"});
  }
  if(frameLT.length > 2 ){
	  // Top frame stri
  	transformation.push({overlay: frameLT, width: (width + matt1_size + matt2_size + (thickness * 2)), height: thickness});
    transformation.push({gravity: "north", y: (0 - thickness), flags: "layer_apply"});
    // Bottom frame strip
    transformation.push({overlay: frameBR, width: (width + matt1_size + matt2_size + (thickness * 2)),...