JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<div class='tagcloud'>
    <ul><!-- weee! //--></ul>
</div>

CSS

.tagcloud {
    text-align: center;
    width: 200px;
}
.tagcloud ul {
    background: #f3f3f3;
    list-style-type: none;
    margin: -11px 0 0;
    padding: 16px;
    position: relative;
}
.tagcloud li {
    display: inline;
    margin: 0 10px 0 0;
}
.tagcloud li a {
    color: #636060;
    line-height: 1.2;
}

.tagcloud .more {
    margin: 0 16px 0 0;
    font-size: 0.82em;
    text-align: right;
}

JavaScript

$(function() {

    // fake tag cloud ( for display only )
    var buzz = 'location,growth,commute,Toronto,safety,Team,neighbourhood,parking,employees,restaurantlocation,growth,commute,Toronto,safety,Team,neighbourhood,parking,employees,restaurant';
    var buzz_arr = buzz.split(',');
    var html = '';
    var min = 10;
    var max = 22;
    var n = max - min + 1;

    $.each(buzz.split(','), function(i) {
        var rand_num = Math.round(Math.random() * n + min);
        html += '<li><a href="#" style="font-size:' + rand_num + 'px;font-weight:' + Math.round((rand_num + '0') / 100) * 100 + ';">' + buzz_arr[i] + '</a></li>\n';
    });

    $(html).appendTo('.tagcloud ul');
});