JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="forum-masonry">
    <div id="discussion-container">
        <div class="box">
            <p>TEXT GOES IN HERE</p>
        </div>
    </div>
     <div id="discussion-container">
        <div class="box">
            <p>TEXT GOES IN HERE</p>
        </div>
    </div>
     <div id="discussion-container">
        <div class="box">
            <p>TEXT GOES IN HERE</p>
        </div>
    </div>
     <div id="discussion-container">
        <div class="box">
            <p>TEXT GOES IN HERE</p>
        </div>
    </div>
     <div id="discussion-container">
        <div class="box">
            <p>TEXT GOES IN HERE</p>
        </div>
    </div>
</div>

CSS

#forum-masonry {
    border:2px solid #222;
    margin:0 auto;
}

#discussion-container {
    float:left;
    width:314px;
}

.box {
    padding:18px;
    background:grey;
}

/* no transition on .isotope container */

.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){

    // MASONARY FOR DISCUSSION TOPICS
  
     
    $('#forum-masonry').isotope({
         itemSelector: '.discussion-container',    
        masonry: {
              columnWidth: 314,
              gutterWidth: 10
        }
   });
   });