JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<div class='demo'>
  <p>
    <b>
      Test me function types!
    </b>
  </p>
</div>

CSS

* {
  margin: 0 auto;
  background-color: black;
  box-shadow: 0 10px 15px #ddd
}

div {
  padding: 8%;
  background-color: #ddd;
  text-align: center;
}

p {
  margin: 2% auto;
  padding: 5%;
  background-color: #fff;
  border: #ddd outset 5px;
  border-radius: 1000px;
  box-shadow: 0 10px 15px #888;
}

p:hover,
b:hover {
  background-color: #fff;
  border: #fff solid 5px;
  transition: 0.4s;
  color: white;
  box-shadow: 0 10px 15px #eee;
  color: #ddd;
}

b {
  padding: 2%;
  background-color: #aaa;
  color: white;
  border: #888 outset 5px;
  border-radius: 1000px;
}

JavaScript

console.time('load all');

(function(window, undefined) {

    // Handle DOMContentLoaded event
    var domReadyStack = [],u=document;

    function handleDOMReady(fn) {
        return u.readyState==='complete'?fn.call(u):domReadyStack.push(fn);
    }

    u.addEventListener('DOMContentLoaded', function onDOMReady() {
        u.removeEventListener('DOMContentLoaded', onDOMReady);
        while (domReadyStack.length) {
            domReadyStack.shift().call(u);
        }
    });
		
		//HTML Shortcut functions
		var
				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('')}`,
				p = 'p',
				div = 'div',
				a = 'a',
				form = 'form'
		;

    // $ constructor
    function $(selector) {
				if (!(this instanceof $)){return new $(selector);}
        if (typeof selector==='function'){return handleDOMReady(selector);}

        // Number of elements in collect$
        this[0];

        // Nodes collect$ array
        this.nodes=[];

        // HTMLElements and NodeLists are wrapped in nodes array
        if (selector instanceof HTMLElement||selector instanceof NodeList){
            this.nodes=selector.length>1?[].slice.call(selector):[selector];
        }else if(typeof selector==='string'){
            if (selector[0]==='<'&&selector[selector.length-1]===">"){
                // Create DOM elements
                this.nodes=[createNode(selector)];
            }else{
                // Query DOM
                this.nodes=[].slice.call(u.querySelectorAll(selector));
        }}

        if (this.nodes.length){
            this.length=this.nodes.length;
            for (var...