JSFiddle - React, Tailwind, and code Playground

by Aijoona

HTML

<div></div>

<div id="second"></div>

JavaScript

$ = function(selector, root) {
    return new $._(selector, root);
};

$._ = function(selector, root) {
    var e;
    
    e = document.querySelectorAll(selector, root);
    
    this.elements = [].slice.call(e);
};

$._.prototype = {
    each: function(fn) {
        var elements, i, l;
        
        elements = this.elements;
        
        for(i = 0, l = elements.length; i < l; i++) {
            fn.call(elements[i], i, elements[i]);            
        } 

        return this;        
    },
    css: function(prop, value) {        
        this.each(function(index, element) {
            this.style[prop] = value;                        
        });  
        return this;        
    },
    html: function(html) {      
        this.each(function(index, element) {
            this.innerHTML = html;                    
        });  
        return this;
    }
};

$('div')
    .css('height', '30px')
    .css('width', '30px')
    .css('backgroundColor', '#f00');

$('#second')
        .html('Hello world!')        
        .css('height', '30px')
        .css('width', '90px')
        .css('color', '#ff0');