JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

Font: <select class="e" id="font">
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Courier New">Courier New</option>
<option value="Helvetica">Helvetica</option>
<option value="Arial">Arial</option>
</select><br />
Header: <input type="text" id="header" class="e" value="This domain is for $ALE"  /><br />
Color: <input type="color" id="hcolor" class="e"><br />
Text: <textarea class="e" id="p">Offer your price <a href="https://twitter.com">@guest</a></textarea><br />
Color: <input type="color" id="color" class="e"><br />
<select class="e" id="bg" multiple  style="width:200px">
<option selected value="background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);" style="background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);">1</option>
<option value="background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);" style="background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);">2</option>
<option value="background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);" style="background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);">Lime</option>
<option value="background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);"  style="background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);">4</option>
 <option value="background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);"  style="background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);">Good Night</option>
 <option value="background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);" style="background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);">6</option>
</select>
<iframe width="100%" height="600" id="output">

</iframe>
<button id="download">Prepare for download</button>
<section...

CSS

#dl-section {
  display: none;
}

JavaScript

$(document).ready(function() {
	var html;
	$('.e').on('change input', upd);
  $('#download').on('click', download);
  function upd() {
  	html = `<!DOCTYPE html><meta charset="utf-8"><head><style>body{color:${$('#color').val()};text-align:center;font-family: ${$('#font').val()};display: flex;align-content: center;justify-content: center;flex-direction: column;align-items: center;height: 100vh;margin:0;${$('#bg').val()}} h1{color: ${$('#hcolor').val()};font-size:5vh;margin:20px;}</style></head><body><h1>${$('#header').val()}</h1><p>${$('#p').val()}</p></body></html>`;
    
  	$('#output')[0].contentDocument.querySelector('body').innerHTML =  html;
    $('#dl-section').hide();
    $('#download').show();
  }
  function download() {
  	var textFileAsBlob = new Blob([html], { type: 'text/html' });
    var url = window.URL.createObjectURL(textFileAsBlob);
    $('#dl-section').find('a').eq(0).attr('href', url);
    $('#dl-section').find('a').eq(1).attr('href', url);
    $('#dl-section').show();
    $('#download').hide();
  }
  upd() ;

});