JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="tag-cloud"></div>

CSS

#tag-cloud {
    margin: 2em auto;
    width: 15em;
    padding: 1em;
    background: #ccc;
    line-height: 1.2;
    word-wrap: break-word;
}

#tag-cloud a {
    padding: 0 0.5em 0 0;
    color: #00c;
}

JavaScript

(function($) {

    $.fn.tagcloud = function(options) {

        var that = this;
        var settings = {
            items: []
        };

        options = $.extend(settings, options);

        return that.each(function() {

            var html = '';

            for (var i = 0; i < options.items.length; i++) {

                var opts = options.items[i];
                html += '<a href="' + opts[0] + '" style="font-size: ' + opts[1] + 'px">' + opts[2] + '</a>';

            }

            $(that).html(html);

        });

    };


})(jQuery);


$('#tag-cloud').tagcloud({
    items: [
        ['#', '10', 'CSS'],
        ['#', '16', 'XHTML'],
        ['#', '22', 'jQuery'],
        ['#', '38', 'JavaScript'],
        ['#', '14', 'SVG'],
        ['#', '50', 'PHP'],
            ['#', '13', 'HTML5']
        ]
});