JSFiddle - React, Tailwind, and code Playground

HTML

<div class="profiles_container">
  <div class="profile_card is_selected">
    Default
  </div>
  <div class="profile_card">
    First
  </div>
  <div class="profile_card">
    Second
  </div>
  <div class="profile_card">
    Third
  </div>
</div>

CSS

.profile_card.is_selected {
  width: 130px;
  max-width: 130px;
  height: 22px;
  line-height: 22px;
  background-color: RGBA(98, 142, 98, 0.8);
  margin-right: 5px;
  margin-top: 4px;
  float: left;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  font: 12px sans-serif;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 6px;
}

.profile_card {
  width: 130px;
  max-width: 130px;
  height: 20px;
  line-height: 20px;
  background-color: rgba(181, 181, 181, 0.2);
  margin-right: 5px;
  margin-top: 4px;
  float: left;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  font: 12px sans-serif;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  transition: all 0.3s;
}

.profile_card:hover {
  height: 26px;
  line-height: 26px;
  transition: all 0.3s;
}

JavaScript

$('.profile_card').on('click', function() {
  $('.profile_card').removeClass('is_selected');
  $(this).addClass('is_selected');
});