JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list-group-wrapper">
                <div class="list-group-item active">Timekeepers</div>
                <div class="list-group">
                    <div class="list-group-item">Cras justo odio</div>
                    <div class="list-group-item">Dapibus ac facilisis in</div>
                    <div class="list-group-item">Morbi leo risus</div>
                    <div class="list-group-item">Porta ac consectetur ac</div>
                    <div class="list-group-item">Vestibulum at eros</div>
                    <div class="list-group-item">Cras justo odio</div>
                    <div class="list-group-item">Dapibus ac facilisis in</div>
                    <div class="list-group-item">Morbi leo risus</div>
                    <div class="list-group-item">Porta ac consectetur ac</div>
                    <div class="list-group-item">Vestibulum at eros</div>
                </div>
            </div>

CSS

.list-group {
  padding-left: 0;
  margin: 0px 0px 0px 0px;
  height: 247px;
  overflow-y: auto;
}
.list-group::-webkit-scrollbar {
  width: 14px;
  height: 18px;
}
.list-group::-webkit-scrollbar-thumb {
  height: 6px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  -webkit-border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
.list-group::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
.list-group::-webkit-scrollbar-corner {
  background-color: transparent;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item.active {
  background-color: #597683;
  border: 1px solid #597683;
  color: #fff;
  font-size: 14px;
}