JSFiddle - React, Tailwind, and code Playground

by digiguru

HTML

<ul id="wordcloud"></ul>
    <ol id="wordKey"></ol>
    
    <div id="footer">
      <a href="javascript:return false;" id="pauseplay">Pause</a> |
      <a href="javascript:return false;" id="change">Change data</a> |
       <a href="javascript:return false;" id="shrink">Shrink</a> 
</div>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}    
    body {
        background: #eee;
        font-family: Helvetica, Arial, sans-serif;
      }
      #wordcloud {
        margin: 30px auto;
        width: 800px;
        height: 600px;
        border: none;
         border: 1px dotted #bada55;
         float:left;
        
      }
      #wordcloud li {
        text-shadow: 0px 1px 1px #ccc;
      }
       #wordKey {
        margin: 30px auto;
        width: 200px;
        height: 600px;
        border: none;
        border: 1px dotted #bada55;
        float:left;
        clear:none;
      }
      #wordKey li {
        text-shadow: 0px 1px 1px #ccc;
        float:none;
        clear:both;
        display: block;
      }
      
      #footer {
        font-size: 13px;
        color: #aaa;
        text-align: center;
        width: 600px;
        margin: 30px auto;
        padding: 0.5em;
       ...

JavaScript

/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Version 1.1
*/

(function($) {

    $.fn.overlaps = function(selector) {
        // if nothing is passed, act as a filter
        if (arguments.length === 0) {
            return this.pushStack(filterOverlaps(this));
        }
        // otherwise compare selected elements against passed elements
        else {
            return isOverlapping(this, $(selector));
        }
    };

    $.expr[':'].overlaps = function(elem, i, m, array) {
        return isOverlapping([elem], array);
    };
    $.expr[':'].overlapping = $.expr[':'].overlaps;

    function filterOverlaps(collection) {
        var dims = getDims(collection),
            stack = [],
            index1 = 0,
            index2 = 0,
            length = dims.length;

        for (; index1 < length; index1++) {
            for (index2 = 0; index2 < length; index2++) {
                if (index1 === index2) {
                    continue;
                }
                if (checkOverlap(dims[index1], dims[index2])) {
                    stack.push(collection[index2]);
                }
            }
        }

        return $.unique(stack);
    }

    function isOverlapping(collection1, collection2) {
        var dims1 = getDims(collection1),
            dims2 = getDims(collection2),
            index1 = 0,
            index2 = 0,
            length1 = dims1.length,
            length2 = dims2.length;

        for (; index1 < length1; index1++) {
            for (index2 = 0; index2 < length2; index2++) {
                if (collection1[index1] === collection2[index2]) {
                    continue;
                }
                if (checkOverlap(dims1[index1], dims2[index2])) {
                    return true;
                }
            }
        }

        return false;
    }

    function getDims(elems) {
        var dims = [],
            i = 0,
            offset, elem;

       ...