JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wr-tabs">
	<div class="tabs">
		<div class="tab tabs1 active">Вкладка №1</div>
		<div class="tab tabs2">Вкладка №2</div>
	</div>
	<div class="content">
		<div class="tab-cont active">
			Контент №1
		</div>
		<div class="tab-cont">
			Контент №2
		</div>
	</div>
</div>

<div class="word">
    <p>Добро пожаловать <span>к нам</span></p>
</div>

CSS

#wr-tabs{
	width: 700px;
	margin: 40px auto 0;
}
	#wr-tabs .tabs{
		background-color: #fff;
		margin-bottom: 3px;
	}
	#wr-tabs .tabs:after{
		content: '';
		display: block;
		clear: both;
		height: 0;
	}
		#wr-tabs .tabs .tab{
			float: left;
			cursor: pointer;
			border-right: 1px solid #f2f4f9;
			padding: 10px 20px;
		}
		#wr-tabs .tabs .tab:last-child{
			border-right: none;
		}
		#wr-tabs .tabs .tab:hover,
		#wr-tabs .tabs .tab.active{
			background-color: #c7e7f9;
			color: #1d7ee4;
		}
	#wr-tabs .content{
		background-color: #fff;
	}
		#wr-tabs .content .tab-cont{
			display: none;
			padding: 15px 10px;
		}
		#wr-tabs .content .tab-cont.active{
			display: block;
		}

JavaScript

$(function(){

	$("#wr-tabs").on("click", ".tab", function(){

		var tabs = $("#wr-tabs .tab"),
			cont = $("#wr-tabs .tab-cont");

		// Удаляем классы active
		tabs.removeClass("active");
		cont.removeClass("active");
		// Добавляем классы active
		$(this).addClass("active");
		cont.eq($(this).index()).addClass("active");

	});
});

$(function () {
    $("#wr-tabs").on("click", ".tab", function(){
        if ($(this).hasClass('tabs2')){
            $('.word span').show();
        }else{
            $('.word span').hide();
        }
    });
});