JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pen">	
			<p id="e-w" onclick="checkDisableCbs(this.id);">banana</p>
		</div>

		<div class="squ">	
			<p id="qin" onclick="checkDisableCbs(this.id);">apple</p>
		</div>

CSS

.squ{
			background-color: #0266B4;
			width: 188px;
			height: 21px;
			position: relative;
			text-transform: uppercase;
			display: table;	
			margin: 7px 0 0 0;
			color: white;
			font-size: 14px;

			transition: all 0.6s ease-in-out;
			-o-transition: all 0.6s ease-in-out;
			-moz-transition: all 0.6s ease-in-out;
			-webkit-transition: all 0.6s ease-in-out;
		}

		.squ:hover{
			background-color: #419EE6;
		}

		.squ p{
			margin: 0;
			display: table-cell;
			vertical-align: middle;
			padding-left: 30px;
		}

		.sec1 .squ {
			cursor: pointer;
		}
		.pen{
			background-color: #419EE6;
			width: 188px;
			height: 21px;
			position: relative;
			text-transform: uppercase;
			display: table;	
			margin: 7px 0 0 0;
			color: white;
			font-size: 14px;
		}

		.pen p{
			margin: 0;
			display: table-cell;
			vertical-align: middle;
			padding-left: 30px;
			transition: all 0.6s ease-in-out;
			-o-transition: all 0.6s ease-in-out;
			-moz-transition: all 0.6s ease-in-out;
			-webkit-transition: all 0.6s ease-in-out;
			cursor: default;
		}

		.pen:after{
			content: '';
			width: 0px;
			height: 0px;
			border-top: 10px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 22px solid #419EE6;
			position: absolute;
			transition: all 0.6s ease-in-out;
			-o-transition: all 0.6s ease-in-out;
			-moz-transition: all 0.6s ease-in-out;
			-webkit-transition: all 0.6s ease-in-out;		
		}

JavaScript

$(".squ").click(function(){
			$('.pen').addClass('squ');
			$('.pen').removeClass('pen');
			$(this).removeClass("squ");
			$(this).addClass("pen");
		});