JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<div class="css-styler-ui">

</div>

<form>
  <header></header>
  <div class="watermark">
  
    <h1>Main Heading</h1>
    <h2>Secondary Heading</h2>
    <h3>Sub Heading</h3>
    <p>Paragraph</p>
    <blockquote>Block Quote</blockquote>
    <input type="submit" value="SUBMIT FORM"> <button type="button" id="reset-button">RESET</button>
    
    </div>
  <footer></footer>
</form>

CSS

form>.watermark>h1{
  color:#356DB0;
  font-family: Arial;
}
form>.watermark>h2{
  color:#666666;
  font-family: Arial;
}
form>.watermark>h3{
  background-color: #356DB0;
  color:#ffffff;
  font-family: Arial;
}
form>.watermark>p{
  color:#000000;
  font-family: Arial;
}
form>.watermark>blockquote{
  color:#333333;
  font-family: Arial;
  background-color:#eeeeee;
  padding: 20px;
}
form>.watermark>input[type="submit"]{
  color:#ffffff;
  background-color: #666666;
  font-family: Arial;
  border-style: solid;
}
form>.watermark>button[type="button"]{
  color:#ffffff;
  background-color: #666666;
  font-family: Arial;
  border-style: solid;
}
form>header{
  background-image: url(https://agrisphere-training.com/live/images/menu/services/Training-Center.png);
  background-size: auto;
  height: 80px;
  background-repeat: no-repeat;
  background-position: left top;
  border: solid 0px #000000;
}
form>footer{
  background-image: url(https://agrisphere-training.com/live/images/menu/services/Training-Center.png);
  background-size: auto;
  height: 80px;
  background-repeat: no-repeat;
  background-position: left top;
  border: solid 0px #000000;
}


.css-styler-ui{
  position: fixed;
  right:0px;
  top: 0px;
  bottom:0px;
  width:232px;
  overflow: auto;
  font-family: helvetica;
  background-color:#444;
}
.css-styler-ui>div.css-styler{
  font-size: 13px;
  background-color:#ddd;
  color:#333;
  width:220px;
}

.css-styler-ui>div.css-styler.active{
  z-index: 100;
}

.css-styler-ui>div.css-styler input{
  border:solid 1px #ccc;
  width: calc(100% - 8px);
  padding:3px;
  background-color: #bbb;
  outline:none;
  font-size: 11px;
}
.css-styler-ui>div.css-styler input[type="color"]{
  border:solid 1px #ccc;
  width: calc(100%);
  padding:0px;
  background-color: #bbb;
  outline:none;
}
.css-styler-ui>div.css-styler select{
  border:solid 1px #ccc;
  width: calc(100%);
  padding:3px;
  background-color: #bbb;
  outline:none;
  font-size: 11px;
}
.css-styler-ui>div.css-styler...

JavaScript

var stylers = new Array();

function CSSStyler(options){
	
  if(!options){
  
  	console.log("NO OPTIONS GIVEN!");
    
    return false;
    
  }
  
  var t = this;
  
  t.ColorToHex = function(color) {
  
    var hexadecimal = color.toString(16);
    return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
  }

  t.ConvertRGBtoHex = function(red, green, blue) {
    return "#" + t.ColorToHex(red) + t.ColorToHex(green) + t.ColorToHex(blue);
  }
  
  t.RGBToHex = function(colorString){
  
  	var start = colorString.indexOf("(");
  	var end = colorString.indexOf(")");
    
    var inner = colorString.substr(start+1,end-start-1);
    
    var components = inner.split(",");
    
    if(components.length > 3){
    
    	return '';
    
    } else {
    
			return t.ConvertRGBtoHex(parseInt(components[0]),parseInt(components[1]),parseInt(components[2]));
      
    }
  
  }
  

  
  var ui = $('<div class="css-styler"><header>' + options.name + '</header><table width="100%" border="0" cellspacing="1" cellpadding="5"><tbody><tr><th width="50%">Property</th><th>Value</th></tr></tbody><tbody class="tbody-properties"></tbody></table></div>');
  
  for(let i=0;i<options.properties.length;i++){
  
  	switch(options.properties[i]){
    
    	case "color":
      case "background-color":
      case "border-color":
      
      var tr = $('<tr><td>' + options.properties[i] + '</td><td><input type="color" /></td></tr>');
      
      var hex= t.RGBToHex(options.previewElement.css(options.properties[i]));
      
     
      
      tr.find('input').val(hex);
      
      
      tr.find('input').change(function(){
      
      	options.previewElement.css(options.properties[i],$(this).val());
      
      });
      
      ui.find('tbody.tbody-properties').append(tr);
      
      break;
      
      
      case "padding":
      case "margin-top":
      case "margin-bottom":
      case "font-size":
     	case "border-width":
      case "border-radius":
      case "height":
  ...