JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
<script src="https://istack.000webhostapp.com/html2canvas.svg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

<div id="test">
	<div class="description-div">

	<p>Sample description</p>

	</div>

	

	  <div class="img-div" id="img-div"></div>
		  
	
</div>

 <form class="cf">
      <div class="half left cf">
        <input type="text"  name="user-name" required>
		 <select name="design-name" class="desgign-class" required>
			 <option value="" >select</option>
			 <option>2</option>
			 <option>3</option>
			 <option>4</option>
		 </select> 
		<input type="submit" name="submit" value="submit" class="submit"> 
		 
      </div>
     
   </form>
   
    
</div>
<div class="new">
 <a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*,
*:before,
*:after {
   @include box-sizing(border-box);
}

html,
body {
   background: #f1f1f1;
   font-family: 'Merriweather', sans-serif;
   padding: 1em;
}

h1 {
   text-align: center;
   color: #a8a8a8;
   @include text-shadow(1px 1px 0 rgba(white, 1));
}

form {
    border: 2px solid blue;
    float: left;
    max-width: 300px;
    padding: 5px;
    text-align: center;
    width: 30%;
}

.img-div {
    border: 1px solid black;
    display: block;
    float: left;
    margin-right: 86px;
    overflow: hidden;
    width: 50%;
	padding: 10px;
}
.btn {
    display: none;
    overflow: hidden;
    width: 100%;
}
.new{
	 display: block;
    overflow: hidden;
    width: 100%;
}

.description-div {
    border: 2px solid green;
    float: left;
    margin-right: 32px;
    padding: 3px;
    width: 13%;
}

.submit {
    background: wheat none repeat scroll 0 0;
    border: 1px solid red;
    cursor: pointer;
}

input,
textarea {
   border: 0;
   outline: 0;
   padding: 1em;
   @include border-radius(8px);
   display: block;
   width: 100%;
   margin-top: 1em;
   font-family: 'Merriweather', sans-serif;
   @include box-shadow(0 1px 1px rgba(black, 0.1));
   resize: none;
   &:focus {
      @include box-shadow(0 0px 2px rgba($red, 1)!important);
   }
}

#input-submit {
   color: white;
   background: $red;
   cursor: pointer;
   &:hover {
      @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
   }
}

textarea {
   height: 126px;
}


}
.half {
   float: left;
   width: 48%;
   margin-bottom: 1em;
}
.right {
   width: 50%;
}
.left {
   margin-right: 2%;
}
@media (max-width: 480px) {
   .half {
      width: 100%;
      float: none;
      margin-bottom: 0;
   }
}

/* Clearfix */
.cf:before,
.cf:after {
   content: " ";
   /* 1 */
   
   display: table;
   /* 2 */
}
.cf:after {
   clear: both;
}
.half.left.cf > input {
   margin: 5px;
}

JavaScript

$(function() {

$(".desgign-class").on("change",function(){
 
 var op=$(this).val();
 
  if(op!=0){
  $('.btn').show();
  $('.img-div').html('');
  if(op==2){
			 for(var i = 0;i<op;i++){
				$('.img-div').append("<img src='https://istack.000webhostapp.com/1tf.svg'>");
			 } 
	}
		
    if(op==3){
			  for(var i = 0;i<op;i++){
				 $('.img-div').append("<img src='https://istack.000webhostapp.com/_1tf.svg'>");
			  }
    }
	
	  if(op==4){
			  for(var i = 0;i<op;i++){
				 $('.img-div').append("<img src='http://svgur.com//i/1yP.svg'>");
			  }
    }
	
	}
	
	else{
	$('.btn').hide();
	}
	
	 $('img').each(function() {

      var $img = jQuery(this);
      var imgID = $img.attr('id');
      var imgClass = $img.attr('class');
      var imgURL = $img.attr('src');

      jQuery.get(imgURL, function(data) {
         // Get the SVG tag, ignore the rest
         var $svg = jQuery(data).find('svg');

         // Add replaced image's ID to the new SVG
         if (typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
         }
         // Add replaced image's classes to the new SVG
         if (typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass + ' replaced-svg');
         }
         // Remove any invalid XML tags as per http://validator.w3.org
         $svg = $svg.removeAttr('xmlns:a');

         // Replace image with new SVG
         $img.replaceWith($svg);

      }, 'xml');

   });
});

(function(exports) {
   function urlsToAbsolute(nodeList) {
      if (!nodeList.length) {
         return [];
      }
      var attrName = 'href';
      if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
         attrName = 'src';
      }
      nodeList = [].map.call(nodeList, function(el, i) {
         var attr = el.getAttribute(attrName);
         if (!attr) {
            return;
         }
         var absURL = /^(https?|data):/i.test(attr);
         if (absURL) {
       ...