JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>

JavaScript

var Component = {
    render: function (platform) {
        $(platform).html(this.shape());
    },
    append: function (platform) {
        $(platform).append(this.shape());
    },
    setContent: function (content) {
        this.content = content;
        return this;
    },
    getContent: function () {
        return this.content;
    }
};

var Button = {
    design: {
        colors: {
            background: 'red',
            text: 'yellow'
        },
        borderRadius: 3,
        padding: 5,
    },
    shape: function () {
        return '<button style="background-color:' + this.design.colors.background + ';'
                + 'border-radius:' + this.design.borderRadius + 'px;'
                + 'padding:' + this.design.padding + 'px;'
                + 'color:' + this.design.colors.text + ';'
                + 'border: none;">'
                + this.getContent()
                + '</button>';
    }
};

var Anchor =  {
    design: {
        color: 'green',
        underline: true
    },
    destination: 'google.com',
    shape: function () {
        return '<a style="color:' + this.design.color + ';'
                + 'text-decoration:' + (this.design.underline ? 'underline' : 'none') + ';" '
                + 'href="http://' + this.destination + '">'
                + this.getContent()
                + '</a>';
    }
};

_.extend(Anchor, Component);
_.extend(Button, Component);

Button
    .setContent('Register')
    .append('body');

Anchor
    .setContent('And here if you already have an account!')
    .append('body');