JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

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 class="kesif-gonderi-alani" style="height:150px;">6</div>
     <div class="kesif-gonderi-alani" style="height:200px;">7</div>
       <div class="kesif-gonderi-alani" style="height:300px;">8</div>
     <div class="kesif-gonderi-alani" style="height:400px;">9</div>
     <div class="kesif-gonderi-alani" style="height:400px;">10</div>
     <div class="kesif-gonderi-alani" style="height:200px;">11</div>
     <div class="kesif-gonderi-alani" style="height:250px;">12</div>
     <div class="kesif-gonderi-alani" style="height:150px;">13</div>
     <div class="kesif-gonderi-alani" style="height:200px;">14</div>
       <div class="kesif-gonderi-alani" style="height:300px;">15</div>
     <div class="kesif-gonderi-alani" style="height:400px;">16</div>
     <div class="kesif-gonderi-alani" style="height:400px;">17</div>
     <div class="kesif-gonderi-alani" style="height:200px;">18</div>
     <div class="kesif-gonderi-alani" style="height:250px;">19</div>
     <div class="kesif-gonderi-alani" style="height:150px;">20</div>
     <div class="kesif-gonderi-alani" style="height:200px;">21</div>
       <div class="kesif-gonderi-alani" style="height:300px;">22</div>
     <div class="kesif-gonderi-alani" style="height:400px;">23</div>
     <div class="kesif-gonderi-alani" style="height:400px;">24</div>
     <div class="kesif-gonderi-alani" style="height:200px;">25</div>
     <div class="kesif-gonderi-alani" style="height:250px;">26</div>
     <div class="kesif-gonderi-alani" style="height:150px;">27</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: 53px 0 0;
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;
}

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",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}(this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||[];return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var...