JSFiddle - React, Tailwind, and code Playground

HTML

<div class="kesif-wrp">
    <div class="kesif-alani">
        <div class="kesif-gonderiler">
            <div class="posts-holder">
                <div class="kesif-gonderi-alani" style="height:300px;">1</div>
                <div class="kesif-gonderi-alani" style="height:400px;">2</div>
                <div class="kesif-gonderi-alani" style="height:400px;">3</div>
                <div class="kesif-gonderi-alani" style="height:200px;">4</div>
                <div class="kesif-gonderi-alani" style="height:250px;">5</div>
            </div>
            <div class="button">Click</div>
        </div>
    </div>
</div>

CSS

body {
    background-color: #323949;
    font-family: 'mstfont' !important;
    margin: 0px;
    padding: 0px;
    min-width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

.kesif-wrp {
    padding: 0px 50px 0px 50px;
    width: 100%;
    position: relative;
}

.kesif-alani {
    padding: 20px 0 50px;
    margin: 36px auto 0;
    position: relative;
    max-width: 1620px;
    min-width: 960px;
}

.kesif-gonderiler {
    color: #444;
}

.kesif-gonderi-alani {
    width: 300px;
    background-color: #ffffff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    margin: 10px;
}

.posts-holder {
    position: relative;
    margin: 10px auto;
}

.kesif-gonderi-alani:nth-child(30n+1) {
    background: #ff0000;
}

.button {
    position: relative;
    float: left;
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    text-align: center;
    color: #000000;
    box-sizing: border-box;
    cursor: pointer;
}

JavaScript

/*!
 * Masonry PACKAGED v4.0.0
 * Cascading grid layout library
 * http://masonry.desandro.com
 * MIT License
 * by David DeSandro
 */

! function(t, e) {
    "use strict";
    "function" == typeof define && define.amd ? define("jquery-bridget/jquery-bridget", ["jquery"], function(i) {
        e(t, i)
    }) : "object" == typeof module && module.exports ? module.exports = e(t, require("jquery")) : t.jQueryBridget = e(t, t.jQuery)
}(window, function(t, e) {
    "use strict";

    function i(i, r, a) {
        function h(t, e, n) {
            var o, r = "$()." + i + '("' + e + '")';
            return t.each(function(t, h) {
                var u = a.data(h, i);
                if (!u) return void s(i + " not initialized. Cannot call methods, i.e. " + r);
                var d = u[e];
                if (!d || "_" == e.charAt(0)) return void s(r + " is not a valid method");
                var c = d.apply(u, n);
                o = void 0 === o ? c : o
            }), void 0 !== o ? o : t
        }

        function u(t, e) {
            t.each(function(t, n) {
                var o = a.data(n, i);
                o ? (o.option(e), o._init()) : (o = new r(n, e), a.data(n, i, o))
            })
        }
        a = a || e || t.jQuery, a && (r.prototype.option || (r.prototype.option = function(t) {
            a.isPlainObject(t) && (this.options = a.extend(!0, this.options, t))
        }), a.fn[i] = function(t) {
            if ("string" == typeof t) {
                var e = o.call(arguments, 1);
                return h(this, t, e)
            }
            return u(this, t), this
        }, n(a))
    }

    function n(t) {
        !t || t && t.bridget || (t.bridget = i)
    }
    var o = Array.prototype.slice,
        r = t.console,
        s = "undefined" == typeof r ? function() {} : function(t) {
            r.error(t)
        };
    return n(e || t.jQuery), i
}),
function(t, e) {
    "function" == typeof define && define.amd ? define("ev-emitter/ev-emitter",...