JSFiddle - React, Tailwind, and code Playground

by qwerew0

HTML

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<div id="options">
<div class="option-set" data-isotope-key="filter">
	<button data-isotope-value="*">show all</button>
	<button data-isotope-value=".metal">metal</button>
	<button data-isotope-value=".post-transition">post-transition</button>
	<button data-isotope-value="number-greater-than-50">number > 50</button>
</div>
</div>
<div id="container">
  
  <div class="element transition metal   " data-symbol="Hg" data-category="transition">
    <p class="number">80</p>
    <h3 class="symbol">Hg</h3>
    <h2 class="name">Mercury</h2>
    <p class="weight">200.59</p>
  </div>

  <div class="element metalloid   " data-symbol="Te" data-category="metalloid">
    <p class="number">52</p>
    <h3 class="symbol">Te</h3>
    <h2 class="name">Tellurium</h2>
    <p class="weight">127.6</p>
  </div>

  <div class="element post-transition metal   " data-symbol="Bi" data-category="post-transition">
    <p class="number">83</p>
    <h3 class="symbol">Bi</h3>
    <h2 class="name">Bismuth</h2>
    <p class="weight">208.9804</p>
  </div>

  <div class="element transition metal   " data-symbol="Cd" data-category="transition">
    <p class="number">48</p>
    <h3 class="symbol">Cd</h3>
    <h2 class="name">Cadmium</h2>
    <p class="weight">112.411</p>
  </div>

  <div class="element alkaline-earth metal   " data-symbol="Ca" data-category="alkaline-earth">
    <p class="number">20</p>
    <h3 class="symbol">Ca</h3>
    <h2 class="name">Calcium</h2>
    <p class="weight">40.078</p>
  </div>

  <div class="element transition metal   " data-symbol="Re" data-category="transition">
    <p class="number">75</p>
    <h3 class="symbol">Re</h3>
    <h2 class="name">Rhenium</h2>
    <p class="weight">186.207</p>
  </div>

  <div class="element post-transition metal   " data-symbol="Tl" data-category="post-transition">
    <p class="number">81</p>
    <h3 class="symbol">Tl</h3>
    <h2...

CSS

* {
  box-sizing: border-box;
}

#container,
.container {
  background: #EEE;
  width: 50%;
  margin-bottom: 20px;
}

.item {
  width:  60px;
  height: 60px;
  float: left;
  border: 1px solid;
  background: #09F;
}

.item.w2 { width: 120px; }
.item.w3 { width: 180px; }

.item.h2 { height: 100px; }
.item.h3 { height: 160px; }
.item.h4 { height: 220px; }
.item.h5 { height: 280px; }

.stamp {
  background: red;
  opacity: 0.75;
  position: absolute;
  border: 1px solid;
}


/* element */

.element {
  width: 80px;
  height: 90px;
  margin: 5px;
  background: #DDD;
  float: left;
  position: relative;
  padding: 5px;
}

.element > * {
  margin: 0;
}

.element .number {
  right: 5px;
  top: 5px;
  position: absolute;
}

.element .symbol {
  font-size: 30px;
  left: 5px;
  top: 5px;
  color: white;
}

.element .name {
  font-size: 14px;
}

.element .weight {
  font-size: 14px;
}

.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

/* stamps */

.stamp {
  position: absolute;
  background: hsla(0, 100%, 50%, 0.8);
  border: 1px solid;
}

.stamp1 {
  left: 10%;
  top: 20px;
  width: 20%;
  height: 200px;
}

.stamp2 {
  right: 200px;
  top: 100px;
  width: 100px;
  height: 100px;
}

JavaScript

var grid = document.querySelector('#container');
var iso = new Isotope( grid, {
  // options...
  itemSelector: '.element',

});



var options = document.querySelector('#options');

options.addEventListener( 'click', function( event ) {
  if ( !matchesSelector( event.target, 'button' ) ) {
    return;
  }

  // var opt = {};
  var key = event.target.parentNode.getAttribute('data-isotope-key');
  var value = event.target.getAttribute('data-isotope-value');

  if ( key === 'filter' && value === 'number-greater-than-50' ) {
    value = function( elem ) {
      var numberText = elem.querySelector('.number').textContent;
      return parseInt( numberText, 10 ) > 40;
    };
  }
  // console.log( key, value );
  iso.options[ key ] = value;
  iso.arrange();
});