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>
Width: <input id="width" type="text" value=2000><br/>
Height: <input id="height" type="text" value= 1335><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/>
<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"/>
-->
<div id="preview"></div>

CSS

.reference{
  width: 20%;
}

#new{
  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 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 = parseInt($('#matt1_size').val());
  var matt2_size = parseInt($('#matt2_size').val());
  var thumb_size = parseInt($('#thum_size').val());
	transformation = [
    // Resizing the image
    //{width: width, height: height, crop: "fill"},
{crop:"crop",x: 100,y:100,width:width,height:height,border:"9px_solid_rgb:cccccc"},    
    // Underlaying the first matt
    {underlay: matt1_pub_id, width: (width + matt1_size), height: (height + matt1_size)},
     {flags: "layer_apply"},
    // Underlaying the second matt
    {underlay: matt2_pub_id, width: (width + matt1_size + matt2_size), height: (height + matt1_size + matt2_size)},
     {flags: "layer_apply"},
    // Top frame strip
    {overlay: frameLT, width: (width + matt1_size + matt2_size + (thickness * 2)), height: thickness},
    {gravity: "north", y: (0 - thickness), flags: "layer_apply"},
    // Bottom frame strip
    {overlay: frameBR, width: (width + matt1_size + matt2_size + (thickness * 2)), height: thickness, angle: 180},
    {gravity: "south", y: (0 - thickness), flags: "layer_apply"},
    // Right frame strip + triangle cut_outs
    {overlay: frameBR, width: (height + matt1_size + matt2_size + (thickness * 2)), height: thickness},
    {crop: "lpad", width: (height + matt1_size + matt2_size + (thickness * 2)), height: (width + matt1_size + matt2_size + (thickness * 2)), gravity: "north"},
    {angle: 90},
    {overlay: "triangle", width: thickness},
    {angle: 180},
    {gravity: "north_east", effect: "cut_out", flags: "layer_apply"},
    {overlay: "triangle",...