JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<link rel="stylesheet" href="http://isotope.metafizzy.co/css/style.css">
<section id="content">
    
      <h1>Filtering</h1>
    

      <section id="copy">
    <p>Filtering hides and reveals item elements.</p>
    <p>See <a href="../docs/filtering.html">docs on filtering</a>.</p>
  </section>
  

  <section class="clearfix" id="options">
    
    
      <h3>Filters</h3>

      <ul data-option-key="filter" class="option-set clearfix" id="filters">
        <li><a class="selected" data-option-value="*" href="#filter">show all</a></li>
        <li><a data-option-value=".metal" href="#filter">metal</a></li>
        <li><a data-option-value=".transition" href="#filter">transition</a></li>
        <li><a data-option-value=".post-transition" href="#filter">post-transition</a></li>
        <li><a data-option-value=".nonmetal" href="#filter">nonmetal</a></li>
        <li><a data-option-value=".inner-transition" href="#filter">inner-transition</a></li>
        <li><a data-option-value=".alkali, .alkaline-earth" href="#filter">alkali and alkaline-earth</a></li>
        <li><a data-option-value=":not(.transition)" href="#filter">not transition</a></li>
        <li><a data-option-value=".metal:not(.transition)" href="#filter">metal but not transition</a></li>
      </ul>


  </section> <!-- #options -->
  
  <div class="clearfix isotope" id="container" style="position: relative; overflow: hidden; height: 240px;">
    
      
          
    <div data-category="transition" data-symbol="Hg" class="element transition metal    isotope-item" style="position: absolute; left: 0px; top: 0px; -moz-transform: translate(5px, 5px);">
      <p class="number">80</p>
      <h3 class="symbol">Hg</h3>
      <h2 class="name">Mercury</h2>
      <p class="weight">200.59</p>
    </div>
    
      
          
    <div data-category="metalloid" data-symbol="Te" class="element metalloid    isotope-item" style="position:...

JavaScript

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(function() {
    var $container = $('#container');
    $container.isotope({
        itemSelector: '.element'
    });
    var $optionSets = $('#options .option-set'),
        $optionLinks = $optionSets.find('a');
    $optionLinks.click(function() {
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('selected')) {
            return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[key] = value;
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode($this, options)
        } else {
            // otherwise, apply new options
            $container.isotope(options);
        }
        return false;
    });

    var filterFromQuerystring = 'metal'; // getParameterByName('filter');
        
    $('a[data-option-value=".' + filterFromQuerystring  + '"]').click();
});