JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<script src="http://desandro.com/_base/js/jquery.masonry.min.js"></script>
<button>button</button>
<br>

<div class="container">
    <div class="wrap" id="grid">
        
        <div class="box col3" data-size="380,380">
            <h5>1</h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
            <div class="expandable">
                
                <br><br>
                Sit amet mi ullamcorper vehicula.
                <br>
                <div style="float:right; width: 150px;">Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</div>
            </div>
        </div>
        
        
    </div>
</div>

CSS

.container { width: 520px; }
.box { color: #222 }
.wrap {
    background: #FFF;
    border: 0px solid #456;
    padding: 10px;
    margin-bottom: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 11px;
    float: left;
    overflow: hidden;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }

.box h5 {
    color:#FFFFFF;
    float:right;
    font-size:25px;
    font-weight:bold;
    padding: 3px;
    margin: 0 2px;
}

.expandable {
    display: none;
}

JavaScript

var tweetArray = [""];


function showTweets(username, number) {
    var html = '';
    var h1 = "<div class='box col1' data-size=380,380'>"
    var h2 = "</div>"

    var elem = $('#grid');
    var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?';
    $.getJSON(tweetFeed, function(d) {
        $.each(d, function(i, item) {
            console.log(i + "i " + item.text.substr(0, 10));
            if (tweetArray.length > 0) {
                for (var j = 0; j < tweetArray.length; j++) {
                    var exists = false;
                    console.log(j + "j " + tweetArray[j].substr(0, 10));
                    if (item.text == tweetArray[j]) {
                        // element already exists.
                        html += h1 + item.text + ' (alt)' + h2;
                        exists = true;
                        break;
                    }
                }
                if (exists == false) {
                    tweetArray.push(item.text);
                    html += h1 + item.text + ' (neu)' + h2;
                }
            }
            else {
                // console.log("ddd" + item.text);
                tweetArray.push(item.text);
                html += h1 + item.text + ' (frisch)' + h2;
            }
        })
        html += "";
        console.log("length " + tweetArray.length);

        elem.prepend(html);
/* elem.children().fadeOut('fast', function() {
            elem.html(html);
        }) */
    })
}

function doAll() {
    showTweets('heiseonline', 5);
    // console.log('test');
}

$(document).ready(function() {
    $('#grid').masonry({
        columnWidth: 100,
        itemSelector: '.box'
    });

    $("#knopp", ".demo").button();
    $("#knopp, button").click(function() {
        doAll();
        $('#grid').masonry({
            columnWidth: 100,
            itemSelector: '.box',
            animate: true,
            animationOptions: {
                duration:...