JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<style id='phStyle'></style>
<div class='status'>
This APP is currently loading assets!
</div>
<div class='infest'></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dlxg8zfJTrQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" autoplay="true" allowfullscreen></iframe>

JavaScript

var z,

		search=()=>alert('hi!'),

		//functional end of the spectrum
    $$=(...spread)=>spread,
		w=a=>$$[a],
		x=(a,b)=>$$[a][b],
		c=(a,b,...c)=>`<${a} class='${b}'>${c.join('')}</${a}>`,
		i=(a,b,...c)=>`<${a} id='${b}'>${c.join('')}</${a}>`,
		ic=(a,b,c,...d)=>`<${a} id='${b}' class='${c}'>${d.join('')}</${a}>`,
		hc=(a,b,c,...d)=>`<${a} href='${b}' class='${c}'>${d.join('')}</${a}>`,
		n=(a,...b)=>`<${a}>${b.join('')}</${a}>`,
		ce=(a,...b)=>`<${a} class='${b.join('')}'></${a}>`,
		t=(...a)=>`${a.join('')}`,
		
		//Object to hold everything
		rec={
			"title":['nav','title','settings'],
			"links":['Search','About','Contact','Recruit'],
			"blank":['title','nav','content','settings'],
			"anti":[
				'.About, .Contact, .Recruit',
				'.Search, .Contact, .Recruit',
				'.Search, .About, .Recruit',
				'.Search, .About, .Contact'
			],"content":[
					n('div',
						n('form',`<input class='searching' type="text" name="search" placeholder="Search..">`),
						`<button type='button' class='button' onclick='search();'>'Search'</button>`),
					n('div',`These are your famous recepies with juicy meats!`),
					n('div',`Should you ever dare call for a chef? Contact me first!`),
					n('p','Hello recruiting page!')			
			]};
$$(
$('.infest').hide(),
$('.status').append(n('p','Loading Stylesheet')),

//CSS Push compiler
$('#phStyle').html(`
	*{margin:0 auto;box-sizing:border-box;font-family:Arial Black;font-size:102.5%;color:white;height:auto;}
  .status{padding:1%;background-color:black;}
	.infest{width:100%;}
	.title,.nav,.content{width:100%;float:left;}
	.title{background-color:green;padding:2%;}
	.link{width:${100/rec.links.length}%;float:left;padding:3%;text-align:center;background-color:red;}
	.link:hover{background-color:white;color:red; transition:0.5s}
	.content,.settings{width:100%;float:left;padding:2%;}
	.content{background-color:blue;padding:4%;min-height:750px;}
 ...