JSFiddle - React, Tailwind, and code Playground

by Rinas

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<!-- Requires Foundation 4 | visit http://foundation.zurb.com to download -->

<!-- Masonry Container -->
<div class="row">
  <div class="large-12 columns">
    <div id="masonryContainer">
      <div class="masonry-brick">
        <img src="http://placehold.it/500x300&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x600&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x700&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x400&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x200&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x300&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x600&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x700&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x400&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x200&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x200&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x300&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x600&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x700&text=Item">
      </div>
      <div class="masonry-brick">
        <img src="http://placehold.it/500x400&text=Item">
      </div>
      <div...

CSS

.masonry-brick { width: 220px; margin: 10px; float: left;  }
#masonryContainer { width: 0 auto; }

JavaScript

<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->

$(window).load(function(){
  $('#masonryContainer').masonry({  
    itemSelector: '.masonry-brick',
    columnWidth: 240
  });  
});