JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<style></style>
<div class='demo'>
</div>

JavaScript

var 
$=
	[
    (sel,out)=>document.querySelectorAll(sel).forEach(out),
    (item,callback)=>{var l=item.length;for(i=0;i<l;i=i+1){callback.call(item[i],i);}},
    (...output)=>output,
    (...joined)=>joined.join(''),

    (sel,...out)=>$[0](sel,z=>z.innerHTML+=$[3](out)),
    (sel,...out)=>$[0](sel,z=>z.innerHTML=$[3](out)),
    (sel,...out)=>$[0](sel,z=>z.innerHTML=''),

    (tag,classes,input)=>`<${tag} class='${classes}'>${input}</${tag}}>`
	],
	$$={
		gather:(sel,out)=>document.querySelectorAll(sel).forEach(out),
    loop:(item,callback)=>{var l=item.length;for(i=0;i<l;i=i+1){callback.call(item[i],i);}},
    para:(...output)=>output,
    mush:(...joined)=>joined.join(''),

    add:(sel,...out)=>$$.gather(sel,z=>z.innerHTML+=$[3](out)),
    change:(sel,...out)=>$$.gather(sel,z=>z.innerHTML=$[3](out)),
    erase:(sel,...out)=>$$.gather(sel,z=>z.innerHTML=''),

    tag:(tag,classes,input)=>`<${tag} class='${classes}'>${input}</${tag}}>`	
	},
		gather=(sel,out)=>document.querySelectorAll(sel).forEach(out),
    loop=(item,callback)=>{var l=item.length;for(i=0;i<l;i=i+1){callback.call(item[i],i);}},
    para=(...output)=>output,
    mush=(...joined)=>joined.join(''),

    add=(sel,...out)=>gather(sel,z=>z.innerHTML+=$[3](out)),
    change=(sel,...out)=>gather(sel,z=>z.innerHTML=$[3](out)),
    erase=(sel,...out)=>gather(sel,z=>z.innerHTML=''),

    tag=(tag,classes,input)=>`<${tag} class='${classes}'>${input}</${tag}}>`	
;
console.time('array');
$[2](
	$[4](
		'.demo',
		$[7](
			'div',
			'ree roo',
			'This is written in Array form'
		)
	),
	$[4](
  	'.demo',
    $[7](	
    	'div',
      'ree',
      'Hello World!'
    )
  ),
  $[4](
  	'.demo',
    $[7](	
    	'div',
      'ree rah',
      'Hello World!'
    )
  ),
	$[4](
		'style',
		`*{margin:1% auto;padding:1%;box-sizing:border-box;background-color:rgba(0,0,0,0.15);}.roo{background-color:white;}`
	)
);
console.timeEnd('array');
console.time('method');
$$.para(
	$$.add(
		'.demo',
		$$.tag(
			'div',
			'ree...