JSFiddle - React, Tailwind, and code Playground

by galtschul

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
    
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
    <textarea></textarea>
</div>
<div class="item">
   ...

CSS

.isotope-item {
  z-index: 2;
}

.isotope-item.expanded {
    z-index: 3;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/


.isotope .isotope-item {
  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      -ms-transition-duration: 0.4s;
       -o-transition-duration: 0.4s;
          transition-duration: 0.4s;
}

.isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

JavaScript

$("#container").isotope({
    itemSelector : '.item',
    masonry : {
        columnWidth : this.cols
    },
    layoutMode : 'masonry'
});