JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<!--Example from: http://sheldonbrown.com/web_sample1.html-->
<center>
<h1>A Simple Sample Web Page</h1>
<img src="http://sheldonbrown.com/images/scb_eagle_contact.jpeg">
<h4>By Sheldon Brown</h4>
<h2>Demonstrating a few HTML features</h2>
</center>
HTML is really a very simple language.  It consists of ordinary text, with commands that are enclosed by "&lt;" and "&gt;" characters, or bewteen an "&amp;" and a ";". 
<p>You don't really need to know much HTML to create a page, because you can copy bits of HTML from other pages that do what you want, then change the text!</p>
<p>This page shows on the left as it appears in your browser, and the corresponding HTML code appears on the right.  The HTML commands are linked to explanations of what they do.</p>
<h3>Line Breaks</h3>
HTML doesn't normally use line breaks for ordinary text.  A white space of any size is treated as a single space.  This is because the author of the page has no way of knowing the size of the reader's screen, or what size type they will have their browser set for.
<p>If you want to put a line break at a particular place, you can use the "&lt;BR&gt;" command, or, for a paragraph break, the "&lt;P&gt;" command, which will insert a blank line.  The heading command ("&lt;H4&gt;&lt;/H4&gt;") puts a blank line above and below the heading text.</p>
<h4>Starting and Stopping Commands</h4>
Most HTML commands come in pairs: for example, "&lt;H4&gt;" marks the beginning of a size 4 heading, and "&lt;/H4&gt;" marks the end of it.  The closing command is always the same as the opening command, except for the addition of the "/".
<p>Modifiers are sometimes  included along with the basic command, inside the opening command's &lt; &gt;.  The modifier does not need to be repeated in the closing command.</p>
<h1>This is a size "1" heading</h1>
<h2>This is a size "2" heading</h2>
<h3>This is a size "3" heading</h3>
<h4>This is a size "4" heading</h4>
<h5>This is a size "5" heading</h5>
<h6>This is a size "6"...

JavaScript

//var TestElement = document.getElementById('TestElement');
//TestElement.innerHTML = "Javascript Modified";

function buildCSS() {
	var userSpeed = prompt("Speed in milliseconds:");
	if(userSpeed == "Off") {
		alert("Turned off.");
		return;
	}
	var i = 0;
	var j = 0;
	var prefixes = ['-webkit-', '-moz-', '-ms-', '-o-', ''];
	var animationName = 'spin';
	var animationSpeed = userSpeed && !isNaN(userSpeed) ? userSpeed : 10000;
	var animationElements = ['*', ' {'];
	var animation = [
		['animation-name: ', animationName, ';'],
		['animation-duration: ', animationSpeed + 'ms', ';'],
		['animation-iteration-count: ', 'infinite', ';'],
		['animation-timing-function: ', 'linear', ';']
		];
	var keyframeHeader = ['@', 'keyframes ', animationName, ' {'];
	var keyframes = [
		['from', ' { ', 'transform: ', 'skew(', '0deg', ', ', '360deg', ');', ' }'],
		['to', ' { ', 'transform: ', 'skew(', '360deg', ', ', '0deg', ');', ' }']
		];

	var cssArray = [];
	cssArray.push(animationElements.join(''));
	for (i = 0; i < prefixes.length; i++) {
		for (j = 0; j < animation.length; j++) {
			cssArray.push('\t' + prefixes[i] + animation[j].join(''));
		}
	}
	cssArray.push('}');
	for (i = 0; i < prefixes.length; i++) {
		cssArray.push(keyframeHeader[0] + prefixes[i] + keyframeHeader.slice(1).join(''));
		for (j = 0; j < keyframes.length; j++) {
			cssArray.push('\t' + keyframes[j].slice(0, 2).join('') + prefixes[i] + keyframes[j].slice(2).join(''));
		}
		cssArray.push('}');
	}
	//console.log(cssArray.join('\n'));
	//TestElement.innerHTML = cssArray.join('<br>');
	return cssArray.join('\n');
}

function addCSS() {
    var styleID = 'CustomAnimationCSS';
	var oldStyle = document.getElementById(styleID);
	if(oldStyle !== null) {
		oldStyle.remove();
	}
	var css = buildCSS(),
		head = document.head || document.getElementsByTagName('head')[0],
		style = document.createElement('style');
	style.type = 'text/css';
	style.id = styleID;

	if (style.styleSheet) {
		style.styleSheet.cssText =...