JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>

<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
100s of free ready to use scripts, tutorials, forums.
Author: Artem - http://javascript4free.by.ru 
-->
</head>
<body>
<br>
<form method=get action="javascript:void(0)" onsubmit="search(this); return false;">
<td>Buscador:<br>
<input type=text name=srchval value="contenido" size="20"></td><tr><input type=submit value="Search"></tr>
</form>
<br>
<font size="2"><br>
&nbsp;</font>



</body>
<label for="search"></label><br/>
<button class="tag tagclicat" type="button" onclick="" id='reset_b'>
RESET
</button>
<button class="tag tagclicat" type="button" onclick="" id='rice_b'>
RICE
</button>
<button class="tag tagclicat" type="button" onclick="" id='salad_b'>
SALAD
</button>
<button class="tag tagclicat " type="button" onclick="" id='fruit_b'>
FRUIT
</button>
<section>
  <p id="demo"></p>
  <div>
    <img src="http://images.media-allrecipes.com/userphotos/960x960/3757193.jpg" />
    <span>Lentils with rice</span>
    <tag>rice lentils</tag>
  </div>
  <div>
    <img src="http://www.todohuertoyjardin.es/blog/wp-content/uploads/2014/02/cultivo-espinacas-huerto.jpg" />
    <span>Spinach salad</span>
    <tag>salad</tag>
  </div>
  <div>
    <img src="http://blogs.20minutos.es/yaestaellistoquetodolosabe/files/2012/07/Por-qu%C3%A9-se-llama-macedonia-al-postre-compuesto-de-varias-frutas.jpg" />
    <span>Fruits salad</span>
    <tag>salad fruit salad</tag>
  </div>
  <div>
    <img src="http://www.regmurcia.com/servlet/integra.servlets.Imagenes?METHOD=VERIMAGEN_95203&nombre=plato-presentado_res_300.jpg" />
    <span>Wheat stew</span>
    <tag>stew</tag>
  </div>
  <div>
    <img src="http://file.answcdn.com/answ-cld/image/upload/w_768,h_298,c_fill,g_face:center,q_60,f_jpg/v1/tk/view/getty/soups-and-stews/c75b9a7f/158794010.jpg" />
    <span>Stew with tomatoes</span>
    <tag>stew</tag>
  </div>
 ...

CSS

input,

td,tr{
  display:block solid black 1px;
  width:90px;
  margin-left:50px;
}

section{
  width: 25em;
  border: .1em lightgray solid;
  margin-left: 20px;
  margin-top:50px;
}
div {
  border-bottom: .1em lightgray solid;
  height: 5em;
  cursor: pointer;
}

div:hover {
  background: whitesmoke;
}

div:last-child {
  border: 0;
}

div span {
  position: absolute;
  margin: 1.75em 0 0 1em;
  color: darkblue;
  font-family: Verdana;
}

img {
  width: 7em;
  height: 5em;
}
tag {
  display: none;
}

.tag {
  
     float:left;
    margin:0.5em 0 7px 20px;
    position:relative;
    z-index:100;
 
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.75em;
    font-weight:bold;
    text-decoration:none;
 
    color:lightgray;
    text-shadow:0px 1px 0px rgba(255,255,255,.4);
 
    padding:0.417em 0.417em 0.417em 0.917em;
 
    border-top:1px solid gray;
    border-right:1px solid gray;
    border-bottom:1px solid gray;
 
    -webkit-border-radius:0 0.25em 0.25em 0;
    -moz-border-radius:0 0.25em 0.25em 0;
    border-radius:0 0.25em 0.25em 0;
 
    
    background-color:#0047b3;
 
    -webkit-box-shadow:
        inset 0 1px 0 lightgray,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow:
        inset 0 1px 0 lightgray,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow:
        inset 0 1px 0 lightgray,
        0 1px 1px rgba(0,0,0,.1);
 
    z-index:100;
}

.tag:before {
    content:'';
    width:1.55em;
    height:1.58em;
 
 
 background-color:#0047b3;
     
    position:absolute;
    left:-0.85em;
    top:.208em;
 
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
 
    border-left:1px solid white;
    border-bottom:1px solid white;
 
    -webkit-border-radius:0 0 0 0.25em;
    -moz-border-radius:0 0 0 0.25em;
    border-radius:0 0 0 0.25em;
 
    z-index:-1;
}

.tag:after {
    content:'';
 
    width:0.5em;
    height:0.5em;
 
    background:white;
 
...

JavaScript

var reset_button = document.getElementById('reset_b'),
  r_button = document.getElementById('rice_b'),
  s_button = document.getElementById('salad_b'),
  f_button = document.getElementById('fruit_b'),
  food = document.getElementsByTagName("tag"),
  text = document.getElementById('demo'),
  text2 = document.getElementById('demo2'),
  forEach = Array.prototype.forEach,
  last_tag = "",
  tag_list = [];

reset_button.onclick = function() {
  reset()
};
r_button.onclick = function() {
  tags("rice")
};
s_button.onclick = function() {
  tags("salad")
};
f_button.onclick = function() {
  tags("fruit")
};

function reset() {
  forEach.call(food, function(f) {
    f.parentNode.style.display = "block";
  });
  last_tag = "";
  tag_list = [];
  text.innerHTML = tag_list.toString();
}

function tags(element) {
  if (last_tag.length == 0)
    last_tag = last_tag.concat(element)
  else
    last_tag = last_tag.concat(" " + element)
  forEach.call(food, function(f) {
    if (f.innerHTML.includes(last_tag))
      f.parentNode.style.display = "block";
    else
      f.parentNode.style.display = "none";
  });
}