JSFiddle - React, Tailwind, and code Playground

HTML

<h1>CSS3 Gradient &rarr; SVG Image Converter</h1>
<noscript><p class="no-js">This page requires JavaScript to function correctly.</p></noscript>
<p class="inputboxes">
	Need to create CSS3 Gradients? I'd recommend using <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">ColorZilla's Ultimate CSS Gradient Generator</a>.
</p>
<div class="inputboxes">
	<p>Enter any CSS3 Linear Gradient (-moz-, -webkit-, -o-, -ms-, or W3C unprefixed syntax; multiple codes are also supported in <a href="http://www.css3.info/preview/multiple-backgrounds/">CSS multiple background syntax</a>):</p>
	<textarea id="cssinput"></textarea>
    <input type="checkbox" id="clearit" name="clearbox" value="1" />Clear Input Box on Focus 
	<input type="button" class="bluebutton right" value="Convert!" id="convert" /> 
	<div id="b64"><input type="checkbox" name="b64" id="b64check" value="1" />Generate CSS for IE9 (Base64 Output) 
	<input type="checkbox" name="b64batch" id="b64batch" value="1" disabled="disabled"/><span>Batch Mode <i data-text="Have a bunch of gradients to convert? Then check this box, paste your CSS selectors above (make sure your CSS is well-formed), and click 'Convert'! (Preview will be disabled while active.)">(?)</i></span></div>
	<!-- AM: Default dimensions changed (script plays much better with absolute units, and, preview now displays at a sensible size. Previous defaults sometimes resulted in a screen-wide prewiew.)  -->
    <p>SVG Height: <input id="userH" value="300" /> SVG Width: <input id="userW" value="300" /> <input type="radio" id="userUnit" name="unit" value="%" />Percent <input type="radio" name="unit" value="px" checked="checked" />Pixels</p>
</div>
<div class="outputboxes" id="outputtext">
<p>For the most accurate rendering, please specify a height and width as close as possible to the dimensions at which you plan to use the SVG. Copy &amp; paste the code below into a text document and save with the ".svg" file extension.</p>
<textarea...

CSS

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
*:not(#IE){filter:none\9} /* AM: Hide filters in IE9 since they don't work correctly with border-radius */
html,body{height:100%;min-height:100%;margin:0;padding:0}
:root,:root>body{height:auto} /* AM: IE8- needs 100% height for the background to fill the whole page, but that messes up IE9+ and everyone else (go-figure), so this resets the height for everyone else. */
body{font-family:Arial,sans-serif;background:#c1c4ce;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f7',endColorstr='#c1c4ce');
	background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiNmNWY1ZjciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjMWM0Y2UiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZzEpIi8+PC9zdmc+);
	background:-webkit-gradient(linear,0 0,0 100%,from(#f5f5f7),to(#c1c4ce));
	background:-webkit-linear-gradient(#f5f5f7,#c1c4ce);background:-moz-linear-gradient(#f5f5f7,#c1c4ce);background:-o-linear-gradient(#f5f5f7,#c1c4ce);
	background:linear-gradient(#f5f5f7,#c1c4ce)}
	
div,svg,textarea,#output{display:block;margin:.25em auto}.left{float:left}.right{float:right}
h1,#footer,.button,.bluebutton{text-align:center}
.inputboxes,.outputboxes,#preview{width:80%;max-width:1200px;margin:.5em auto}
textarea,#preview{width:100%;resize:none;padding:0}
.no-js{color:#822}
.no-js,p.inputboxes{text-align:center}

.inputboxes{border:1px solid #333;margin-bottom:20px;padding:10px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}
input:focus,textarea:focus,code{outline:none;background:#eff} /* AM: Webkit browsers show an unsightly outline that doesn't respect border-radius very well. So, replace with a background...

JavaScript

/* Overview of major changes, done by Anthony Martinez (http://www.linkedin.com/in/canthonymartinez/). (All other script/CSS Annotations by me are preceded by "AM:")
 *
 * 0.9.5 - May 27, 2013
 * 1)	Added an optional batch mode to generate base64 CSS output for multiple selectors at once. Yes! Another exclusive feature, as far as I know.
		Born out of frustration with the limitations of existing LESS mixins and online gradient generators, this blows everything out of the water :)
		Requires IE10 or any recent release of Chrome, FF, Safari, or Opera; it won't work in IE9-.
 * 2)	Optimized IE9 base64 output to retain original rgba/hsla/transparent colors, saving a few extra bytes per stop.
 * 3)	Migrated all JS event handlers into the < script > block to separate content and behavior.
 *
 * 0.9 - May 26, 2013
 * 1)	Added full support for new unprefixed W3C syntax gradients (using 'to <destination>' syntax).
 * 2)	Added logic to calculate degrees differently, to match the new W3C syntax. 
 * 			For example, try -moz-linear-gradient(72deg,#fff,#000) and linear-gradient(72deg,#fff,#000) in Firefox CSS -- they render differently.
 *			Then input them into this script, and they should each render in SVG the same way they do in CSS.
 * 3) 	If all color stop percentages are missing, then the script will now interpolate them, as happens in CSS.
 *			If only the start and ending stops are missing, the script will add them.
 * 4) 	If no directions or angle units are specified, the script will now assume defaults, as happens in CSS.
 * 5) 	"Angle units"? Yeah, there's now support for all valid units, (deg, rad, grad, & turns). Plus, negative values and decimals work.
 * 6) 	Improved support for old Webkit syntax -- from() and to() will work as expected, even with decimals, and even if to() comes before other color-stops (as is acceptable).
 * 7) 	Added support for RGB/A percents, HSL/A, floating points in RGB/A and HSL/A, color names, and 'transparent' keyword.
 * 8) 	Added...