JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<h2>Internet Image generator</h2>
			<input id="pic" /><input type="button" id="load-pic" value="Load" /><br />
			<input type="button" value="Size" id="imagisize" />
			<input type="button" value="Add block" id="add-block" /><br />
			Font-color: <input type="color" id="font-color" /><br />
			Bg-color: <input type="color" class="inet-image-bg-color" value="#888888" /><br />
			Bg-alpha: <input type="range" max="1" min="0" step="0.1" value="1" class="inet-image-bg-opasity" /><br />
			Font-family: <select id="font-family">
				<option value="serif">serif</option>
				<option value="sans-serif">sans-serif</option>
				<option value="monospace">monospace</option>
				<option value="Arial">Arial</option>
				<option value="Comic Sans">Comic Sans</option>
				<option value="Verdana">Verdana</option>
			</select><br />
			Font-size: <input type="range" max="70" min="10" step="1" id="font-size" /><br />
			Line-height: <input type="range" max="400" min="10" step="5" id="line-height" /><br />
			Padding: <input type="range" max="50" min="0" step="1" id="padding" /><br />
			Width: <input type="range" max="100" min="0" step="1" defaultValue="100" id="width" /><br />
			Height: <input type="range" max="100" min="0" step="1" defaultValue="10" id="height" /><br />
      Text-shadow-width: <input type="range" max="100" min="0" step="1" value="0" class="inet-image-text-shadow-width" /><br />
      Text-shadow-color: <input type="color" value="#000000" class="inet-image-text-shadow-color" /><br />

			<div id="result"></div>

CSS

#result {
  width:240px;
  height:40px;
  overflow:hidden;
  background: #FFF;
  position:relative;
}
.rel {
  position:relative;
}
.div {
  background:rgba(136,136,136, 1);
  min-height:30px;
  position:relative;
  width:100%;
  text-align: center;
}
input[type="range"] {
  width:300px;
}

JavaScript

$(function() {
    $( "#result" ).resizable();
    $('#load-pic').click(function() {
      var img = $('<img>');
      img.addClass('rel');
      img.attr('src', $('#pic').val());
      img.appendTo('#result');
      //img.resizable();
      //img.draggable();
    });
    
    $('#padding').change(function() {
      $('.selected').css('padding-top', $(this).val() + 'px');
      $('.selected').css('padding-bottom', $(this).val() + 'px');
    });
    $('#line-height').change(function() {
      $('.selected').css('line-height', $(this).val() + '%');
    });
    $('#height').change(function() {
      $('.selected').css('height', $(this).val() + '%');
    });
    $('#width').change(function() {
      $('.selected').css('width', $(this).val() + '%');
    });
    $('#font-size').change(function() {
      $('.selected').css('font-size', $(this).val() + 'px');
    });
    $('#font-family').change(function() {
      $('.selected').css('font-family', $(this).val());
    });
    $('#bg-alpha').change(function() {
      $('.selected').css('background-color', $(this).val());
    });
    $('.inet-image-bg-color').change(function() {
      $('.selected').css('background-color', $(this).val());
    });
    $('#font-color').change(function() {
      $('.selected').css('color', $(this).val());
    });
    $('.inet-image-text-shadow-width').change(getTextShadow);
    $('.inet-image-text-shadow-width-2').change(getTextShadow);
    $('.inet-image-text-shadow-color').change(getTextShadow);
    
    $('.inet-image-bg-color').change(getColor);
    $('.inet-image-bg-opasity').change(getColor);
    
    function getTextShadow() {
    var css = '0 0 ' + $('.inet-image-text-shadow-width').val()  + 'px ' + $('.inet-image-text-shadow-color').val();
    $('.selected').css('text-shadow', css);
    }
    
    function getColor() {
    console.log('n');
	var hex = $('.inet-image-bg-color').val().replace(/#/g, '');
	var rgb = parseInt(hex.substr(0,2), 16) + ',' + parseInt(hex.substr(2,2), 16) + ','...