JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class='init'></style>
</head>
<body><div class='container'>
PLease allow scripts to view this page
</div></body>
<script>
(function(window, undefined) {
    var self=self;
    // Handle DOMContentLoaded event
    var domReadyStack = [],u=document,z;
    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);
    }});
    // $ constructor
    function $(selector) {
				if (!(self instanceof $)){return new $(selector);}
        if (typeof selector==='function'){return handleDOMReady(selector);}       
        self.length=0;/* Number of elements in collect$*/       
        self.nodes=[];/* Nodes to collect array*/
        // HTMLElements and NodeLists are wrapped in nodes array
        if (selector instanceof HTMLElement||selector instanceof NodeList){
            self.nodes=selector.length>1?[].slice.call(selector):[selector];
        }else if(typeof selector==='string'){
            (selector[0]==='<'&&selector[selector.length-1]===">")
                // Create DOM elements
                ?self.nodes=[createNode(selector)]
            
                // Query DOM
                :self.nodes=[].slice.call(u.querySelectorAll(selector));}
        if (self.nodes.length){
            self.length=self.nodes.length;
            for (var z=0;z<self.nodes.length;z++){
                self[z]=self.nodes[z];}}}
    function createNode(html) {var div=u.createElement('div');div.innerHTML=html;return div.firstChild;}		
		$.prototype={each(callback){for(z=0;this[z];z++){callback.call(this[z],this,z);}return this;}};
    window.$ = $;
		
})(window);

    var //added classes
    	key=[
      	[	'addClass',
          'removeClass',
         ...

JavaScript

$('style.init').add(`
	*{box-sizing:border-box;margin:0 auto;background-color:rgba(0,0,0,0.1);}
	p{padding:2%;}
`);

$('.demo').change(
	c(div,'content',
		n(p,'And his name is JOHN CENA!'),
		n(p,'dun dea dea dah daaaaa')	
	)
);