JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<script src="https://raw.github.com/shaunxcode/bling/master/index.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

JavaScript

bling("div p span", {
    appendTo: "body",
    onCreate: function() { 
        this.span.text("Some text in the span");
        
        this.div.on({
            mouseenter: function(){
                $(this).css("color", "#ff0000");
            },
            mouseleave: function(){
                $(this).css("color", "#000");
            }
        });
        
        this.p.append(bling("span", function(s) { 
            s.text("Some quick text in this new span");
        }));
    }
});

bling("#walter.male.person, #tony.male.person, #xena.female.person", {
    appendTo: "body",
    onCreate: function() {
        this.walter.text("Walter, the guy");
        this.tony.text("Tony, another guy");
        this.xena.text("WARRIOR PRINCESS");
        
        this.female.css({
            background: "#FFB6F9",
            color: "#fff"
        });
        
        this.male.css({
            background: "#0000ff",
            color: "#fff"
        });
    }
});

bling("#walter.male.person, #tony.male.person, #xena.female.person", {
    appendTo: "body",
    onCreate: function(walter, tony, xena) {
        walter.text("Walter, the guy");
        tony.text("Tony, another guy");
        xena.text("WARRIOR PRINCESS");
        
        this.female.css({
            background: "#FFB6F9",
            color: "#fff"
        });
        
        this.male.css({
            background: "#0000ff",
            color: "#fff"
        });
    }
})