JSFiddle - React, Tailwind, and code Playground

by Calvin Tomkins

HTML

<link rel="stylesheet" href="https://secure158.inmotionhosting.com/~tradel9/wp3/wp-content/cache/min/1/97d00826546e334d180276c4b1d2a343.css">
<div class="inputs">
  <input class="filterbox" type="checkbox" value="shelflife" />Add Shelf Life
  <input class="filterbox" type="checkbox" value="stability" />Add Stability
  <input class="filterbox" type="checkbox" value="volume" />Add Volume
  <input class="filterbox" type="checkbox" value="water" />Higher Water Retention
</div>
<br>

<div class="prdct_container">

  <div class="tags product water">
    <div class="et_pb_module">
      <a href="#">
        <span class="et_portfolio_image"><img src="http://bakerite.co.uk/wp3/wp-content/uploads/chickpea-300x213.jpg" alt="" width="400" height="284"><span class="et_overlay"></span></span>
        <h4 style="margin-top: 8px;">Chickpea Flour</h4>
      </a>
    </div>
  </div>

  <div class="tags product volume">
    <div class="et_pb_module">
      <a href="#">
        <span class="et_portfolio_image"><img src="http://bakerite.co.uk/wp3/wp-content/uploads/maize-300x213.jpg" alt="" width="400" height="284"><span class="et_overlay"></span></span>
        <h4 style="margin-top: 8px;">Maize Flour Wholegrain</h4>
      </a>
    </div>
  </div>

  <div class="tags product stability volume">
    <div class="et_pb_module">
      <a href="#">
        <span class="et_portfolio_image"><img src="http://bakerite.co.uk/wp3/wp-content/uploads/maize2-300x213.jpg" alt="" width="400" height="284"><span class="et_overlay"></span></span>
        <h4 style="margin-top: 8px;">Maize H1 Flour</h4>
      </a>
    </div>
  </div>

  <div class="tags product water volume">
    <div class="et_pb_module">
      <a href="#">
        <span class="et_portfolio_image"><img src="http://bakerite.co.uk/wp3/wp-content/uploads/polenta-300x213.jpg" alt="" width="400" height="284"><span class="et_overlay"></span></span>
        <h4 style="margin-top: 8px;">Maize TM Flour</h4>
      </a>
    </div>
  </div>

 ...

CSS

.product {
  max-width: 225px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;
  float: left;
}

.prdct_title h4 {
  margin-top: 3px;
}

JavaScript

$('input').click(function() {
  $('.tags').hide();
  var marcados = $('input:checked').map(function() {
    return $(this).val();
  }).get();
  $('div.' + marcados.join('.')).show();
});