JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel-filter-wrapper"><div class="panel-filter" data-filter-property="">
        <div class="panel-selected-filter">
            <span class="selected-filter-name">All</span>
            <span class="caret caret-down">^</span>
        </div>
        <ul>
            <li data-value="*" data-param="role" class="selected">All</li>
            <li data-value="admin" data-param="role" class="">Admins</li>
            <li data-value="client" data-param="role">Clients</li>
            <li data-value="agent" data-param="role">Agents</li> 
        </ul>
</div>

CSS

.panel-filter-wrapper {
  display: inline-block;
}
.panel-filter {
  display: inline-block;
  cursor: pointer;
  position: relative;
  color: #999;
}
.panel-filter .panel-selected-filter {
  padding: 2px 19px 2px 10px;
  border: 1px solid transparent;
  position: relative;
  z-index: 1;
}
.panel-filter:hover,
.panel-filter.active {
  color: #444;
}
.panel-filter:hover .panel-selected-filter,
.panel-filter.active .panel-selected-filter {
  border: 1px solid #ccc;
  background: #fff;
}
.panel-filter:hover .caret,
.panel-filter.active .caret {
  display: inline-block;
}
.panel-filter.active .panel-selected-filter {
  border-bottom-width: 0;
}
.panel-filter.active ul {
  display: block;
}
.panel-filter ul {
  list-style: none;
  display: none;
  position: absolute;
  border: 1px solid #ccc;
  top: 24px;
  left: 0;
  margin: 0;
  min-width: 100%;
  z-index: 0;
  background: #fff;
  font-size: 13px;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0px;
}
.panel-filter li {
  padding: 5px 15px;
  white-space: nowrap;
  color: #333;
}
.panel-filter li:first-child {
  border-top: none;
}
.panel-filter li:hover {
  background-color: #f2f4f8 !important;
  color: #181a1c;
}
.panel-filter li.selected {
  font-weight: bold;
}
.panel-filter .caret {
  display: none;
  position: absolute;
  right: 5px;
  top: 9px;
}

JavaScript

$(".panel-selected-filter").click(function() {
    $('.panel-filter > ul').show();
});
$('.panel-filter > ul > li').click(function() {
    $('.selected-filter-name').text($(this).text());
    $('.panel-filter > ul').hide();
});