JSFiddle - React, Tailwind, and code Playground

by revzephyr

HTML

<div id="image_cont">

<div>
    <img src="http://www.psdgraphics.com/file/color-wheel-icon.jpg" width="30px" height="auto"><a href=""></a><br>peter
</div>
<div>
    <img src="http://www.psdgraphics.com/file/color-wheel-icon.jpg" width="30px" height="auto"><a href=""></a><br>james
</div>
<div>
    <img src="http://www.psdgraphics.com/file/color-wheel-icon.jpg" width="30px" height="auto"><a href=""></a><br>tom
</div>
<div>
    <img src="http://www.psdgraphics.com/file/color-wheel-icon.jpg" width="30px" height="auto"><a href=""></a><br>tommy
</div>
    
    </div>

JavaScript

$("<input>").insertBefore($("div#image_cont"));
$("input").attr("id","search-criteria");

$("#search-criteria").on("keyup", function () {
        $(this).closest($("div#image_cont>div"))[img.indexOf(keyword) !== -1 ? 'show' : 'hide']();
    });