JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
    <div class="filter">
    <div class="manchester">Manchester</div>
  <div class="london">London</div>
   <div class="Paris">Paris</div>
    
</div>




<div class="container">
<div class="holder"> 
    <div class="name">Joe</div>
    <div class="address">London</div>
    
</div>

<div class="holder"> 
    <div class="name">Jack</div>
    <div class="address">Manchester</div>
    
</div>

<div class="holder"> 
    <div class="name">Sarah</div>
    <div class="address">paris</div>
    
</div>

<div class="holder"> 
    <div class="name">Ken</div>
    <div class="address">Paris</div>
    
</div>

<div class="holder"> 
    <div class="name">Andrew</div>
    <div class="address">Manchester</div>
    
</div>

<div class="holder"> 
    <div class="name">Jane</div>
    <div class="address">London</div>
    
</div>

<div class="holder"> 
    <div class="name">Andrea</div>
    <div class="address">London</div>
    
</div>

<div class="holder"> 
    <div class="name">David</div>
    <div class="address">Paris</div>
    
</div>
    
    <div class="holder"> 
    <div class="name">Simon</div>
    <div class="address">Paris</div>
    
</div>
    
    
    </div>
    </div>

CSS

.holder, .manchester, .london, .Paris {width:100px;height:60px;background:#345678;float:left;margin:10px;color:#fff;text-align:center;padding-top:10px;}
.manchester, .london, .Paris {height:30px;background:#876543;}
.container, .filter {width:360px;height:auto;background:#888;}
.page {width:360px;height:auto;}

.visible {display:block;}
.invisible {display:none;}

JavaScript

$(".manchester").click(function (e) {
    if ($('.address:contains("Manchester")').length) {
    $('holder').addClass('visible');
}
    if ($('.address:contains("London")').length) {
    $('.holder').addClass('invisible');
}
    if ($('.address:contains("Paris")').length) {
    $('.holder').addClass('invisible');
}
    e.preventDefault();
});

$(".london").click(function (e) {
    if ($('.address:contains("London")').length) {
    $('holder').addClass('visible');
}
    if ($('.address:contains("Manchester")').length) {
    $('.holder').addClass('invisible');
}
    if ($('.address:contains("Paris")').length) {
    $('.holder').addClass('invisible');
}
    e.preventDefault();
});

$(".paris").click(function (e) {
    if ($('.address:contains("Paris")').length) {
    $('holder').addClass('visible');
}
    if ($('.address:contains("London")').length) {
    $('.holder').addClass('invisible');
}
    if ($('.address:contains("Manchester")').length) {
    $('.holder').addClass('invisible');
}
    e.preventDefault();
});