JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<div data-role="page" class="pages" id="1stpagename">
	<div id="genarea">
		
	</div>
	
	<div id="genoptions">
		Theme:<br>
		<select name="selectthemeheader">
			<option value="a" selected="selected">Black</option>
			<option value="b">Blue</option>
			<option value="c">Gray</option>
			<option value="d">Light Gray</option>
			<option value="e">Yellow</option>
		</select><br><br>

		Fixed:<br>
		<select name="selectfixedheaderoption">
			<option value="1">Yes</option>
			<option value="2" selected="selected">No</option>
		</select><br><br>

		Heading:<br>
		<input type="text" id="headerheading" placeholder="My Website" value="Placeholder"><br><br>

		Heading Size:<br>
		<select name="selectheaderheadingsize">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3" selected="selected">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select><br><br>

		<input value="Submit" type="submit" id="submitheader">
	</div>
</div>

JavaScript

var fixgeometry = function() {
    /* Some orientation changes leave the scroll position at something
    * that isn't 0,0. This is annoying for user experience. */
    scroll(0, 0);

    /* Calculate the geometry that our content area should take */
    var header = $(".header:visible");
    var footer = $(".footer:visible");
    var content = $(".content:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

    /* Trim margin/border/padding height */
    content_height -= (content.outerHeight() - content.height());
    content.height(content_height);
   }; /* fixgeometry */

   $(window).bind("orientationchange resize pageshow", fixgeometry);
  
  $("input#submitheader").click(function() {
	var headeropen = "<div data-role='header' "
	var headercloseopenmark = "'>"
	var headerheadingopen = "<h1>"
	var pageheaderheading = $("input#headerheading").val();
	var headerheadingclose = "</h1>"
	var headerclose = "</div>"
	$("#genarea").append((headeropen) + (headercloseopenmark) + (headerheadingopen) + (pageheaderheading) + (headerheadingclose) + (headerclose));
  });