JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div class="box">
Hello, !important.
</div>

CSS

ul > li > a{
    font-family: 'Georgia';
    font-size: 2em;
    background-color: #565656;
    color: #333;
    text-shadow: 0 1px 0 #777, 0 -1px 0 #000;
    margin-left: 1em;
}

.active {
    color:red;
}
.box{
    background: lightgrey;
    margin: 5px;
    padding: 5px;
/*    color: red !important;*/
}

JavaScript

var body = document.querySelector("body");
var box = document.createElement("div");
body.appendChild(box);

box.style.width = "100%";
box.style.margin = "5px";
box.style.border = "1px solid grey";
box.textContent = "cssText = " + box.style.cssText;
box.classList.add("box");

var root = document.createElement("ul");
root.textContent = "root";
box.appendChild(root);

for (var i = 1; i <= 5; i++) {
    var child = document.createElement("li");
    root.appendChild(child);
    var link = document.createElement("a");
    link.textContent = "child " + i;
    child.appendChild(link);
}


var myMenu = new Menu("My Menu", root);
myMenu.createItem("item1");

function Menu(menuName, parentNode) {
    this.root = document.createElement("ul");
    this.root.textContent = menuName;
    parentNode.appendChild(this.root);

    this.createItem = function(itemName, parentItem) {
        var item = document.createElement("li");
        parentItem = parentItem ? parentItem : this.root;
        parentItem.appendChild(item);
        var link = document.createElement("a");
        link.textContent = itemName;
        item.appendChild(link);
        return item;
    };
}



var cc1 = document.createElement("p");
cc1.textContent = "grand child 1";
c1.appendChild(cc1);
cc1.classList.add("active");
cc1.onclick = function(e) {
    this.classList.remove("active");
}
var clone = c1.cloneNode(true);
root.insertBefore(clone, p1);

/*
$("#root").delegate("p", "click", function(e) {

    //alert(e.cancelBubble);
    alert(this.textContent);
    e.preventDefault();
    e.stopPropogation();
});
*/