JSFiddle - React, Tailwind, and code Playground

by johnnytrinh

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
  <div class="item"><a href="#">text 1</a></div>
  <div class="item"><a href="#">text 2</a></div>
  <div class="item"><a href="#">text 3</a></div>
  <div class="item"><a href="#">text 4</a></div>
  <div class="item"><a href="#">text 5</a></div>
  <div class="item"><a href="#">text 6</a></div>
  <div class="item"><a href="#">text 7</a></div>
  <div class="item"><a href="#">text 8</a></div>
  <div class="item"><a href="#">text 9</a></div>
  <div class="item"><a href="#">text 10</a></div>
  <div class="item"><a href="#">text 11</a></div>
  <div class="item"><a href="#">text 12</a></div>
  <div class="item"><a href="#">text 13</a></div>
  <div class="item"><a href="#">text 14</a></div>
  <div class="item"><a href="#">text 15</a></div>
  <div class="item"><a href="#">text 16</a></div>
  <div class="item"><a href="#">text 17</a></div>
  <div class="item"><a href="#">text 18</a></div>
  <div class="item"><a href="#">text 19</a></div>
  <div class="item"><a href="#">text 20</a></div>
  <div class="item"><a href="#">text 21</a></div>
  <div class="item"><a href="#">text 22</a></div>
  <div class="item"><a href="#">text 23</a></div>
  <div class="item"><a href="#">text 24</a></div>
  <div class="item"><a href="#">text 25</a></div>
  <div class="item"><a href="#">text 26</a></div>
  <div class="item"><a href="#">text 27</a></div>
  <div class="item"><a href="#">text 28</a></div>
  <div class="item"><a href="#">text 29</a></div>
  <div class="item"><a href="#">text 30 </a></div>
  <div class="item"><a href="#">text 31</a></div>
  <div class="item"><a href="#">text 32</a></div>
  <div class="item"><a href="#">text 33</a></div>
  <div class="item"><a href="#">text 34</a></div>
  <div class="item"><a href="#">text 35</a></div>
  <div class="item"><a href="#">text 36</a></div>
  <div class="item"><a href="#">text 37</a></div>
  <div class="item"><a href="#">text 38</a></div>
  <div...

CSS

.item {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 5px;
  float: left;
}

.item.selected {
  width: 220px;
  height: 210px;
  background: yellow;
}

a {
  color: #000;
  font-size: 20px;
  padding: 20px;
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

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

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

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

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, 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;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function(){
  
  
  var $container = $('#container'),
      $items = $('.item');
  
  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      selected : function( $item ){
        // sort by selected first, then by original order
        return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
      }
    },
    sortBy : 'selected'
  })
  
  $items.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    var $previousSelected = $('.selected');
    if ( !$this.hasClass('selected') ) {
      $this.addClass('selected');
    }
    
    $previousSelected.removeClass('selected');

    // update sortData for new items size
    $container
      .isotope( 'updateSortData', $this )
      .isotope( 'updateSortData', $previousSelected )
      .isotope();
    
  });

});