JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<label for = "buscar">Escribe el nombre del plato:</label>
<input type = "text" id = "buscar" placeholder = "Nombre del plato" autofocus />
<section>
    <div>
        <img src = "http://laylita.com/recetas/wp-content/uploads/2008/01/DSC02173.JPG" />
        <span>Lentejas con arroz</span>
    </div>
    <div>
        <img src = "http://www.todohuertoyjardin.es/blog/wp-content/uploads/2014/02/cultivo-espinacas-huerto.jpg" />
        <span>Ensalada de espinacas</span>
    </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>Ensalada de frutas</span>
    </div>
    <div>
        <img src = "http://www.regmurcia.com/servlet/integra.servlets.Imagenes?METHOD=VERIMAGEN_95203&nombre=plato-presentado_res_300.jpg" />
        <span>Guiso de trigo</span>
    </div>
    <div>
        <img src = "http://laylita.com/recetas/wp-content/uploads/Salsa-de-cebolla-con-tomate.jpg" />
        <span>Encebollado con tomate</span>
    </div>
</section>

CSS

input, section{
    width: 25em;
}

section{
    border: .1em lightgray solid;
    margin: 1em 3.5em;
}

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;
}

JavaScript

var buscar = document.getElementById("buscar"),
    platos = document.getElementsByTagName("span"),
    forEach = Array.prototype.forEach;

buscar.addEventListener("keyup", function(e){
    var texto = this.value;
  
    forEach.call(platos, function(p){
        if (p.innerHTML.toLowerCase().search(texto.toLowerCase()) == -1)
            p.parentNode.style.display = "none";        
        else
            p.parentNode.style.display = "block";        
    });
}, false);