JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/riklomas/quicksearch/master/jquery.quicksearch.js"></script>
<form id="search">
<p>Search:</p>
<input type="text" id="search">
</form>
<div class="StoreRow">
<div style="margin-bottom:0px;"><h3>Store 1</h3></div>
<div class="person">
<div class="avatar" style="background-image: url(http://www.gravatar.com/avatar/8dbc99f1a44bcb53bfd8ab16124515a2?s=80)">
<a href="http://google.com">
<img src="http://www.gravatar.com/avatar/8dbc99f1a44bcb53bfd8ab16124515a2?s=80" alt="{FirstName} {LastName}" />
</a>
</div>
<p class="person-name">Kris Dahl</p>
<p class="person-title"> Principal</p>
</div>
<div class="person">
<div class="avatar" style="background-image: url(http://www.gravatar.com/avatar/8dbc99f1a44bcb53bfd8ab16124515a2?s=80)">
<a href="http://google.com">
<img src="http://www.gravatar.com/avatar/8dbc99f1a44bcb53bfd8ab16124515a2?s=80" alt="{FirstName} {LastName}" />
</a>
</div>
<p class="person-name">Random Person</p>
<p class="person-title"> Principal</p>
</div>
</div>
<div class="StoreRow">
<div style="margin-bottom:0px;"><h3>Store 3</h3></div>
<div class="person">
<div class="avatar" style="background-image: url(http://www.gravatar.com/avatar/8dbc99f1a44bcb53bfd8ab16124515a2?s=80)">
<a href="http://google.com">
<img src="http://www.gravatar.com/avatar/8dbc99f1a44bcb53bfd8ab16124515a2?s=80" alt="{FirstName} {LastName}" />
</a>
</div>
<p class="person-name"> Moises Rodriguez</p>
<p class="person-title"> Developer</p>
</div>
</div>
<div class="StoreRow">
<div style="margin-bottom:0px;"><h3>Corporate</h3></div>
<div class="person">
<div class="avatar" style="background-image: url(http://www.gravatar.com/avatar/8dbc99f1a44bcb53bfd8ab16124515a2?s=80)">
...
CSS
div.person {
width: 300px;
height: 100px;
background: #efefef;
border: 0px solid #ccc;
background-image: url(http://sst.atomicinfotech.com/css/carbon-ui-theme/images/ui-bg_highlight-hard_75_e3e6e8_1x100.png);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
float:left;
margin: 4px 10px 5px 0px;
}
div.person div.avatar {
width: 80px;
height: 80px;
margin: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
float: left;
}
div.person p.person-name {
padding-top: 20px;
font-weight:bold;
font-size:16px;
line-height:1.2em;
font-family:"Comic Sans MS", cursive, sans-serif;
}
div.person p.person-title {
color: #8B8989;
font-weight:bold;
font-size:12px;
line-height:1.2em;
font-family: Arial, Helvetica, sans-serif;
}
div.person div.avatar img {
opacity: 0;
}
div.StoreRow {
overflow: hidden;
width: 930px;
height: auto;
margin-top: 45px;
}
JavaScript
$(function() {
$('input#search').quicksearch('.StoreRow');
});