JSFiddle - React, Tailwind, and code Playground
HTML
List page
<div class="list-2-grid" ng-app="Location" ng-controller="Location">
<div class="view view-locations-listing view-id-locations_listing view-display-id-locations_listing_page view-dom-id-f9aa60ce984207c109b49e804a30133b">
<div class="list-item-container">
<div class="list-items" style="">
<h1><span>Locations, Hours & More</span></h1>
<select id="category_select" ng-options="loc as loc for loc in returnFilterLoc()" ng-model="selectedLocation">
<option value="">All Categories</option>
</select>
<div class="category-wrapper">
<nav id="entertainment_bars" class="persist-area content-list l2g-menu-list" ng-repeat="loc in locationListToFilter() | filter:filterLocation">
<h3 class="persist-header">{{loc.category_name}}</h3>
<ul>
<li ng-repeat="Loc in locationList | filter:{category_name:loc.category_name}">
<a href="locations/{{Loc.tid}}">
<img width="214" height="146" src="{{Loc.photo}}">
<span>{{Loc.name}}</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
Detail page
<section class="dtl-description" ng-app="Location" ng-controller="LocationDetail">
<p>{{loc.category_name}}</p>
</section>