JSFiddle - React, Tailwind, and code Playground

HTML

<div class="profiles_container">
  <div class="profile_card_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_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

$('.profiles_container').on('click', '.profile_card', function() {
  $('.profiles_container').find(".profile_card_selected").removeClass("profile_card_selected").addClass("profile_card");
  $(this).removeClass("profile_card").addClass("profile_card_selected");
});