JSFiddle - React, Tailwind, and code Playground
HTML
<script language="javascript">
function genDiv(){
var brdr = document.getElementById('udBorder').value;
var brdrw = document.getElementById('udBorderWidth').value;
var brdrr = document.getElementById('udBorderRadius').value;
var pad = document.getElementById('udPadding').value;
var padl = document.getElementById('udPaddingL').value;
var padr = document.getElementById('udPaddingR').value;
var padt = document.getElementById('udPaddingT').value;
var padb = document.getElementById('udPaddingB').value;
var back = document.getElementById('udBackground').value;
var bc1 = document.getElementById('udFirstC').value;
var bc2 = document.getElementById('udSecondC').value;
var c = document.getElementById('udColor').value;
var brdrch = document.getElementById('borderAlt');
var padch = document.getElementById('paddingAlt');
var backch = document.getElementById('backAlt');
var result = document.getElementById('divRes');
if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == true)){
result.innerHTML = "<div style=\"padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";-webkit-background:linear-gradient(" + bc1 + "," + bc2 + ");-moz-background:linear-gradient(" + bc1 + "," + bc2 + ");-o-background:linear-gradient(" + bc1 + "," + bc2 + ");-ms-background:linear-gradient(" + bc1 + "," + bc2 + ");color:" + c + ";" + "\"> </div>";
}else if((brdrch.checked == true) && (padch.checked == true) && (backch.checked == false)){
result.innerHTML = "<div style=\"padding-left:" + padl + "px" + ";padding-right:" + padr + "px" + ";padding-top:" + padt + "px" + ";padding-bottom:" + padb + "px" + ";background:" + back + ";color:" + c + ";" + "\"> </div>";
}else if((brdrch.checked == true) && (padch.checked == false) && (backch.checked == false)){
result.innerHTML = "<div style=\"padding:" + pad + "px" + ";background:" + back + ";color:" + c + ";" + "\"> </div>";
}else if((brdrch.checked ==...