JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Preview</h4>
<div id="prev-wrapper" style="position: relative; 

background-image: url(https://www.oneredlion.com/animals-in-zoos-8-2/); 

background-size: cover; background-position: center; height: 600px; min-width: 300px; text-align: center; padding: 0 20px;">

<span id="prev-logo" style="display: block; 
background-image: url('http://www.oneredlion.com/wp-content/uploads/2017/09/0.jpeg');
height: 48px; background-size: auto 100%; background-position: top right; background-repeat: no-repeat;"></span>

<a id="prev-button" target="_blank" href="http://www.oneredlion.com/donations/18826/?affiliate=petrescuereport" style="display: inline-block; background-color: #fff; color: #c61e03; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 22px; font-weight: 600; font-family: 'Lucida Grande',Lucida Sans,Lucida Sans Unicode,sans-serif,Arial,Helvetica,Verdana,sans-serif; position: relative; top: 204px;">
DONATE NOW
</a>

</div>
<br>
<br>
<hr>
<h4>Options</h4>
<section>
  <label>Background image URL</label>
  <br>
  <input type="text" id="bg-input" placeholder="Enter background image url" value="http://www.oneredlion.com/wp-content/uploads/2017/09/animals-in-zoos-8.jpg">
</section>
<section>
  <label>Call To Action text</label>
  <br>
  <input type="text" id="cta-input" placeholder="Enter CTA button text" value="DONATE NOW">
</section>
<section>
  <label>Banner Height (px)</label>
  <br>
  <input type="number" id="height-input" placeholder="Enter banner height in pixels (default 300)" value="300">
</section>
<section>
  <label>Banner Width (leave empty for responsiveness)</label>
  <br>
  <input type="number" id="width-input" placeholder="Enter banner width in pixels (default 100%)" value="">
</section>
<section>
  <label>Affiliate name (Required)</label>
  <br>
  <input type="text" id="affiliate-input" placeholder="Enter affiliate name to know where payer comes from" value="">
</section>
<hr>
<section>
  <label>Result Code:</label>
  <br>
 ...

CSS

*{
  box-sizing: border-box;
}

section{
  padding: 10px 0;
}

label {
  font-size: 14px;
  font-weight: 500;
}

input,
textarea{
  display: block;
  width: 100%;
  padding: 10px 20px;
  border-radius: 7px;
  border: solid 1px #e2e2e2;
  font-size: 13px;
}

textarea{
  min-height: 300px;
}

JavaScript

$(document).ready(function(){

var $bgInput = $('#bg-input'),
		$ctaInput = $('#cta-input'),
		$heightInput = $('#height-input'),
		$widthInput = $('#width-input'),
		$affiliateInput = $('#affiliate-input'),
    
    $resultOutput = $('#result-output'),
    
    $prevWrapper = $('#prev-wrapper'),
    $prevButton = $('#prev-button'),
    $prevLogo = $('#prev-logo'),
    
    defaultBg = 'http://www.oneredlion.com/wp-content/uploads/2017/09/21272737_525831277758204_2679515001160228696_o.jpg',
    defaultDonateURL = 'http://www.oneredlion.com/donations/18826/?affiliate=',
    defaultCTA = 'DONATE NOW',
    defaultHeight = '300',//px
    defaultWidth = '100%',
    
    ctaBottomSpace = 20,//px
    
    
    template = "<div style=\"position: relative; background-image: url('__bg_value__'); background-size: cover; background-position: center; height: __height_value__; width: __width_value__; text-align: center; padding: 0 20px;\"> <span style=\"display: block; background-image: url('http://www.oneredlion.com/wp-content/uploads/2017/09/0.jpeg'); height: 48px; background-size: auto 100%; background-position: top right; background-repeat: no-repeat;\"></span> <a target=\"_blank\" href=\"__form_value__\" style=\"display: inline-block; background-color: #fff; color: #c61e03; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 22px; font-weight: 600; font-family: 'Lucida Grande',Lucida Sans,Lucida Sans Unicode,sans-serif,Arial,Helvetica,Verdana,sans-serif; position: relative; top: __btn_top_value___;\"> __cta_value__ </a> </div>";
    
    
    function updateResult(){
    	var bgValue = $bgInput.val() || defaultBg,
      		ctaValue = $ctaInput.val() || defaultCTA,
      		heightValue = $heightInput.val(),
          affiliateValue = encodeURIComponent($affiliateInput.val()),
          formURL = defaultDonateURL + affiliateValue,
          widthValue = $widthInput.val() ? parseInt($widthInput.val()) + 'px' : defaultWidth,
          logoHeight =...