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

$(".profile_card").click(function(){	

$('.profiles_container').find(".profile_card_selected").removeClass("profile_card_selected").addClass("profile_card");

$(this).removeClass("profile_card").addClass("profile_card_selected");
});