JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header id="site-header">
	<div class="main">
  <div class="controls">
  	<div class="options">
  		<label>
  			<span>Width:</span>
  			<input value="600" id="inpImgWidth" type="text">
			</label>
			<label>
  			<span>Height:</span>
	  		<input value="400" id="inpImgHeight" type="text">
			</label>
			<label>
  			<span>Amount:</span>
  			<input value="1" id="inpImgAmount" type="text">
			</label>
			<hr>
			<label>
			<label>
  			<span>Font size:</span>
  			<input value="24" id="inpTxtFontSize" type="text">
			</label>
			<label>
  			<span>Text:</span>
  			<input value="Enter text" id="text-info" type="text">
			</label>
			<label>
  			<span>Draw text overlay:</span>
  			<input checked id="inpTxtDrawOverlay" type="checkbox">
			</label>
			<hr>
				<label>
				<span>Format:</span>
				<select class="izbira-formata">
					<option value="png" id="format-png">.png</option>
					<option value="jpg" id="format-jpg">.jpg</option>
					<option value="gif" id="format-gif">.gif</option>
				</select>
				</label>
				<hr>
				<label>
				<span>Background color:</span>
				<input class="inp-color" type="color"><br> Random: <input type="checkbox" class="chk-bg-random" checked>
				</label>
				<label>
				<span>Font color:</span>
				<input class="inp-color1" type="color"><br> Random: <input type="checkbox" class="chk-bg-random1" checked>
				</label>

		</div>
		  <button class="btn btn-generate" id="btnGenerate">Generate</button>
	  <button class="btn btn-download" id="btnDownload">Download</button>
	  <button class="btn btn-clear" id="btnClear">Clear</button>
	  </div>
	  <!--<span class="text-output"></span>-->
	  <h2><a class="text-output" href="600x400/000/fff" target="_blank">600x400/000/fff</a></h2>
	  <div id="output" class="output">
	  <span class="output-label">Output</span>
	  </div>
	</div>

CSS

img {
  /* width: 100% */
}

hr {
  height: 0px;
    border-bottom: none;
    border-top: 1px solid #ccc;
  display: block;
  margin: 15px 0;
}

input[type="text"] {
  border: 1px solid #999;
  border-radius: 3px;
  padding: 0 5px;
  height: 24px;  
}

input[type="text"]:hover{
  border: 1px solid #999;
  border-radius: 3px;
  padding: 0 5px;
  height: 24px;  
  border-color: #3B5998;
}

button {
  padding: 5px 10px;
  background: #3B5998;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 0 5px 10px 0;
  width:100px;
}

button:hover {
  background-color: #f1c40f;
}
button:active {
  background-color: #d35400;
}
button:focus {
  outline: none;
}

.options label {
  display: block;
  margin-bottom: 10px;
}

.options label > span {
  display: inline-block;
  width: 140px
}

.output {
  margin-top: 30px;
  padding: 15px 10px 10px;
  position: relative;
  border: 1px solid #ccc;
  min-height: 32px;
  line-height: 0;
}

.output img {
  margin: 0 10px 10px 0;
}

.output-label {
  background-color: #fff;
  padding: 0 10px;
  position: absolute;
  line-height: 100%;
  top: -10px;
}
#site-header
{
	float:left;
	width:50%;
}
#site-desno
{
	float:right;
	width:50%;
}
.desna-stran{
	padding-left:50px;
}
.live-preview
{
	width:500px;
	height:300px;
}
.preview{
	float:left;	
}

JavaScript

(function ($) {
	'use strict';

	// 'consts'
	var IMAGETYPE_SHAPES = 0;

	// variables
	var $text_izpis = $('.text-output');
	var images = [];
	var $output = $('#output');
	var $btnGeneriraj_skripto = $('#btnGenerate');
	var $btnDownload = $('#btnDownload');
	var $btnClear = $('#btnClear');
	var $_canvas = $('<canvas />');
	var ctx = $_canvas[0].getContext('2d');
	var $inpW = $('#inpImgWidth');
	var $inpH = $('#inpImgHeight');
	var $inpA = $('#inpImgAmount');
	var $inpS = $('#inpShapeDensity');
	var $inpTxtDraw = $('#inpTxtDrawOverlay');
	var $inpTxtSize = $('#inpTxtFontSize');
	var $inpTxtContent = $('#text-info');
	var options = {
		width: 300,
		height: 250,
		amount: 100,
		type: IMAGETYPE_SHAPES,
		colorsBack: ['#f1c40f', '#ecf0f1', '#9b59b6'],
		colorsMain: ['#d35400', '#c0392b', '#2980b9', '#2c3e50', '#27ae60', '#7f8c8d', '#34495e'],
		shapeDensity: 3,
	    shapeSpread: 0.5,
	    textOverlay: true,
	    textOverlayContent: '{width} x {height}',
	    textFontSize: 32
		
	};

	var getRandomInt = function (min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	  var useRandomBg;
	  var selectedColor;
	  var izbranaBarva;
	  var useRandomTxt;

		// generator function
		var generateImages = function () {
		useRandomBg =  $('.chk-bg-random').prop('checked');
		selectedColor = $('.inp-color').val();
		izbranaBarva = $('.inp-color1').val();
		useRandomTxt =  $('.chk-bg-random1').prop('checked');
   
		options.width = (parseInt($inpW.val())) ? parseInt($inpW.val()) : options.width;
		options.height = (parseInt($inpH.val())) ? parseInt($inpH.val()) : options.height;
		options.amount = (parseInt($inpA.val())) ? parseInt($inpA.val()) : options.amount;
		options.shapeDensity = (parseInt($inpS.val())) ? parseInt($inpS.val()) : options.shapeDensity
		
		options.textOverlay = $inpTxtDraw.prop('checked');
		options.textOverlayContent = $inpTxtContent.val() ? $inpTxtContent.val() : options.textOverlayContent;
		options.textFontSize = $inpTxtSize.val()...