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

function buildCSS() {
    let animationSpeed = parseInt(prompt('Length of time each rotation takes (Min 1000ms, Max 60000ms):'), 10)
    if(isNaN(animationSpeed)) return false
    else animationSpeed = Math.max(Math.min(animationSpeed, 60000), 1000)
    const prefixes = ['-webkit-', '-moz-', '-ms-', '-o-', '']
    const animationName = 'spin'

const selector1Body = prefixes.map(prefix => `    ${prefix}animation-name: ${animationName};
    ${prefix}animation-duration: ${animationSpeed}ms;
    ${prefix}animation-iteration-count: infinite;
    ${prefix}animation-timing-function: linear;`).join('\n')
const selectors2 = prefixes.map(prefix => `@${prefix}keyframes ${animationName} {
    from { ${prefix}transform: rotate(0deg); }
    to { ${prefix}transform: rotate(360deg); }
};`).join('\n')
const css = `* {
${selector1Body}
}

${selectors2}`

    return css
}

function addCSS() {
    const styleID = 'CustomAnimationCSS'
    const previousStyle = document.getElementById(styleID)
    if(previousStyle) previousStyle.remove()
    const 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 = css
    else style.appendChild(document.createTextNode(css))

    head.appendChild(style)
}

addCSS()