JSFiddle - React, Tailwind, and code Playground

by Elak

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
  <div id="container">
    
          
    <div class="element other nonmetal   " data-symbol="H" data-category="other">
      <p class="number">1</p>
      <h3 class="symbol">H</h3>
      <h2 class="name">Hydrogen</h2>
      <p class="weight">1.00794</p>
    </div>
    
          
    <div class="element noble-gas nonmetal   " data-symbol="He" data-category="noble-gas">
      <p class="number">2</p>
      <h3 class="symbol">He</h3>
      <h2 class="name">Helium</h2>
      <p class="weight">4.002602</p>
    </div>
    
          
    <div class="element alkali metal   " data-symbol="Li" data-category="alkali">
      <p class="number">3</p>
      <h3 class="symbol">Li</h3>
      <h2 class="name">Lithium</h2>
      <p class="weight">6.941</p>
    </div>
    
          
    <div class="element alkaline-earth metal   " data-symbol="Be" data-category="alkaline-earth">
      <p class="number">4</p>
      <h3 class="symbol">Be</h3>
      <h2 class="name">Beryllium</h2>
      <p class="weight">9.012182</p>
    </div>
    
          
    <div class="element metalloid   " data-symbol="B" data-category="metalloid">
      <p class="number">5</p>
      <h3 class="symbol">B</h3>
      <h2 class="name">Boron</h2>
      <p class="weight">10.811</p>
    </div>
    
          
    <div class="element other nonmetal   " data-symbol="C" data-category="other">
      <p class="number">6</p>
      <h3 class="symbol">C</h3>
      <h2 class="name">Carbon</h2>
      <p class="weight">12.0107</p>
    </div>
    
          
    <div class="element other nonmetal   " data-symbol="N" data-category="other">
      <p class="number">7</p>
      <h3 class="symbol">N</h3>
      <h2 class="name">Nitrogen</h2>
      <p class="weight">14.0067</p>
    </div>
    
          
    <div class="element other nonmetal   " data-symbol="O" data-category="other">
      <p class="number">8</p>
      <h3 class="symbol">O</h3>
      <h2...

CSS

/* 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;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

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

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

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header,...

JavaScript

var $container = $('#container');
      
      $container.isotope({
        itemSelector: '.element'
      }).isotope('shuffle');