JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<!--
<body onload='($(`body`).addHTML(`<div id="demo"><p>hi</p></div>`),$(`#demo`).addHTML(`<p>yeet</p>`).addHTML(`<p>nuuu</p>`).css(`border:5px solid #000;padding:5%;border-radius:25px;`))' />
-->

JavaScript

function $(selector){
    return [
      function(item){return document.querySelectorAll(selector).forEach(item)},
      function(item){
				this[0](i=>i.innerHTML+=item);
        return this;
			},
      function(item){
				this[0](i=>i.style=item);
        return this;
			},
      function(item){
      	this[0](i=>i.onclick=item);
        return this;
      },
      function(item){
				var i=selector;
				while(i--){
					item.call(this[i],this,i)
				}
			}
    ]
}

var $$=
	(selector=>document.querySelectorAll(selector))
  .prototype={
  	each(out){this.forEach(out);return this;},
    add(out){this.each(i=>i.innerHTML+=out);return this;},
    minus(){this.each(i=>i.innerHTML='');return this;},
		css(out){this.each(i=>i.css=out);return this;},
		click(out){this.each(i=>i.onclick=out);return this;}
  
  };

(
	$(`body`)[1](`<div id="demo"><p>hi</p></div>`),
  $(`#demo`)
    [1](`<p>yeet</p>`)
    [1](`<p>nuuu</p>`)
    [1](`<ul>List me damnit
        <li>item 1</li>
        <li>item 2</li>
      </ul>`)
    [2](`border:5px solid #000;background-color:rgba(32,0,0,0.2);padding:5%;border-radius:25px;`),
  ['p','li','ul','div']
  ['forEach']
  ((item,i)=>$(item)[1]('<button>hah</button>')[2](`border:5px solid #000;background-color:rgba(32,0,0,0.2);padding:5%;border-radius:25px;`)),
  $('li')[3](()=>console['log']('i have been clicked!')),
	$$("*").css("padding:1%;border:solid black 5px;")
);