JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<style id='style'>
  *{background-color:black;margin:0 auto;box-sizing:border-box;}
  body{padding:1%;background-color:black;}
  .info, .info *{background-color:#eee;color:black;padding:5%;border-radius:30px;}
  .wrap{margin:1% auto;background-color:#ddd;padding:1%;border-radius:35px;}
  .cont{background-color:white;box-shadow:0 5px 5px #aaa;border-radius:1000px;padding:1%;margin:1% auto;}
</style>
<body>
  <div class='wrap'>
    <div class='info'>
      <h4>
        This is my test of jquery-lite
      </h4>
      This begins the adventures of the object known as chaos!<br />
      It will drown, electrocute, burn even!<br />
      Yes Despacito exists, get over it memeists!
    </div>
    <div class='demo cont'></div>
    <div class='demo2 cont'>Despacito</div>
    <div class='demo3 cont'>Despacito 2</div>
  </div>
</body>

JavaScript

/*Note:
*Never do .style EVER!
*use style id and innerHTML += ( add() )
*Its best NOT to create a function to create methods
*/

var i,chaos={},  //The object to add to
  
  //html shortcuts
  div=(a,...b)=>`<div class='${a}'>${b.join('')}</div>`,
  p=(a,...b)=>`<p class='${a}'>${b.join('')}</p>`,
  a=(a,...b)=>`<a class='${a}'>${b.join('')}</a>`,
  
	$=(selector)=>document.querySelectorAll(selector),
	set=(gather,method,property)=>{
  	$(gather).forEach(x=>x[method]=property);
  },
  add=(gather,method,property)=>{
  	$(gather).forEach(x=>x[method]+=property);
  },
  elem=['.demo','.demo2','.demo3','.demo4','.demo5','.demo6'],
  stack=funk=>{function ree(){
    return funk + this;
  }},
  $$$=(...para)=>para,
  x=[
    [
      ['.demo','.wrap',elem],
      ['innerHTML','style','style'],
      ['hello world!',`padding:2%;`,`border:solid black 1px;`]],
    [
      ['sizzle','watery','strucked','spooked','hide','show'],
      [
        function(sel){
          set(sel,'innerHTML','sizzle sizzle burned out');
          add('#style','innerHTML',`${sel}{background-color:#800;color:yellow;}${sel}:hover{background-color:yellow;color:#800;transition:1s;}`);
          return this;
        },function(sel){
          set(sel,'innerHTML','glub glub watered out');
          add('#style','innerHTML',`${sel}{background-color:blue;color:white;}${sel}:hover{background-color:white;color:blue;transition:1s;}`);
          return this;
        },function(sel){
          set(sel,'innerHTML','zkt zkt shocked out');
          add('#style','innerHTML',`${sel}{background-color:yellow;color:black;}${sel}:hover{background-color:black;color:yellow;transition:1s;}`);
          return this;
        },function(sel){
          set(sel,'innerHTML','aaah aaah spooked out');
          add('#style','innerHTML',`${sel}{background-color:black;color:white;}${sel}:hover{background-color:white;color:black;transition:1s;}`);
          return this;
        },function(sel){
         ...