JSFiddle - React, Tailwind, and code Playground

by chicagogrooves

HTML

<h1>Zalgo text generator</h1>
		<span>2009 - tchouky </span>
		<p></p>
		<table id="zalgotable">
			<tr>
				<td id="lulz_container" style="BORDER-RIGHT: black 2px solid; PADDING-RIGHT: 50px; BORDER-TOP: black 2px solid; PADDING-LEFT: 50px; PADDING-BOTTOM: 50px; BORDER-LEFT: black 2px solid; PADDING-TOP: 50px; BORDER-BOTTOM: black 2px solid" width=550>
					<p id="lulz"></p>
				</td>
				
				<td style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; BORDER-LEFT: black 2px solid; BORDER-BOTTOM: black 2px solid" width=450>
					<textarea id="zalgo_txt" style="FONT-FAMILY: Times New Roman" rows="13" cols="80">To invoke the hive-mind representing chaos.
Invoking the feeling of chaos.
With out order.
The Nezperdian hive-mind of chaos. Zalgo.
He who Waits Behind The Wall.
ZALGO!</textarea>

					<form id="zalgo_form" action="">
						<input id="zalgo_btn" onclick="zalgo_textarea('zalgo_txt');" type="button" value="HE COMES"> 
						<input id="zalgo_ref" style="FLOAT: right" onclick="toggle('reference');" type="button" value="Toggle reference sheet"> 
						<br />
						<table>
							<tr>
								<td>
									<input id="zalgo_opt_up" type="checkbox">fuck up going up<BR>
									<input id="zalgo_opt_mid" type="checkbox" CHECKED>fuck up the middle<BR>
									<input id="zalgo_opt_down" type="checkbox" CHECKED>fuck up going down<BR>
								</td>
								
								<td>
									<input id="zalgo_opt_mini" type="radio" name="optval" CHECKED >mini fuck up<BR>
									<input id="zalgo_opt_normal" type="radio" name="optval">normal fuck up<BR>
									<input id="zalgo_opt_maxi" type="radio" name="optval">maxi fuck up<BR>
								</td>
							</tr>
						</table>
					</form>			
				</TD>
			</tr>
		</TABLE>

CSS

.zalgo_td {
			BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 32px; BORDER-LEFT: black 1px solid; WIDTH: 48px; BORDER-BOTTOM: black 1px solid; TEXT-ALIGN: center
		}
		.zalgo_ref_table {
			BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid
		}

JavaScript

//============================================================
			// ZALGO text script by tchouky
			//============================================================

			// data set of leet unicode chars
			//---------------------------------------------------

			//those go UP
			var zalgo_up = [
				'\u030d', /*     ̍     */		'\u030e', /*     ̎     */		'\u0304', /*     ̄     */		'\u0305', /*     ̅     */
				'\u033f', /*     ̿     */		'\u0311', /*     ̑     */		'\u0306', /*     ̆     */		'\u0310', /*     ̐     */
				'\u0352', /*     ͒     */		'\u0357', /*     ͗     */		'\u0351', /*     ͑     */		'\u0307', /*     ̇     */
				'\u0308', /*     ̈     */		'\u030a', /*     ̊     */		'\u0342', /*     ͂     */		'\u0343', /*     ̓     */
				'\u0344', /*     ̈́     */		'\u034a', /*     ͊     */		'\u034b', /*     ͋     */		'\u034c', /*     ͌     */
				'\u0303', /*     ̃     */		'\u0302', /*     ̂     */		'\u030c', /*     ̌     */		'\u0350', /*     ͐     */
				'\u0300', /*     ̀     */		'\u0301', /*     ́     */		'\u030b', /*     ̋     */		'\u030f', /*     ̏     */
				'\u0312', /*     ̒     */		'\u0313', /*     ̓     */		'\u0314', /*     ̔     */		'\u033d', /*     ̽     */
				'\u0309', /*     ̉     */		'\u0363', /*     ͣ     */		'\u0364', /*     ͤ     */		'\u0365', /*     ͥ     */
				'\u0366', /*     ͦ     */		'\u0367', /*     ͧ     */		'\u0368', /*     ͨ     */		'\u0369', /*     ͩ     */
				'\u036a', /*     ͪ     */		'\u036b', /*     ͫ     */		'\u036c', /*     ͬ     */		'\u036d', /*     ͭ     */
				'\u036e', /*     ͮ     */		'\u036f', /*     ͯ     */		'\u033e', /*     ̾     */		'\u035b', /*     ͛     */
				'\u0346', /*     ͆     */		'\u031a' /*     ̚     */
			];

			//those go DOWN
			var zalgo_down = [
				'\u0316', /*     ̖     */		'\u0317', /*     ̗     */		'\u0318', /*     ̘     */		'\u0319', /*     ̙     */
				'\u031c', /*     ̜     */		'\u031d', /*     ̝     */		'\u031e', /*     ̞     */		'\u031f', /*     ̟     */
				'\u0320', /*     ̠     */		'\u0324',...