JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-head">
	<a href="#musli"><div class="title">Таб 1</div></a>
	<a href="#fruits" class="selected"><div class="title">Таб 2</div></a>
	<a href="#chocolate"><div class="title">Таб 3</div></a>
	<a href="#makaruns"><div class="title">Таб 4</div></a>
</div>

CSS

.tab-head > a {
	display: block;
	width: 233px;
	height: 170px;
	float: left;
	text-decoration: none;
	font-family: 'Agreverance';
	font-size: 20px;
	color: #663300;
	text-align: center;
	background: url(http://cs14101.vk.me/c610520/u42408336/docs/00b6dc73e08e/tab.png?extra=HWkm-Ptlr_E0OHRoNAc1K9dAhxlgyF6mMSCt_F3jyPLwSgPuOKgnO1nWYKN75jz_PU_2PCrcHUW2SSTChoaXC6ZT3JlRBcw) left bottom no-repeat;
	position: relative;
}
.tab-head > a:after {
	content: '';
	display: block;
	position: absolute;
	width: 67px;
	height: 150px;
	background: url(http://cs14101.vk.me/c610520/u42408336/docs/1016285609da/tab_right.png?extra=CmiHhkF2wbb0v--yjQPRW4h3Ucph7Dgf8dGC0fKxX4Gw_08CgglMJVhtrfFmlyInRbLGSWOotZtw3v9fAtfMKgnEtBUGwW8) no-repeat;
	bottom: 0;
	right: 0;
	z-index: 99;
}
.tab-head > a + a {
	margin-left: -45px;
}
.tab-head > a.selected {
	color: #eb3329;
	background: url(http://cs14101.vk.me/c610520/u42408336/docs/c4f810166aa7/tab_active.png?extra=5UDGUSW_jt1nakhJdrfk42vAhDmJjN662TyLmYqAJVX3FRkOthlUG4X9LeWYpDyPtez_EqkeVh3k_N63LmQ2FkOtqy-9Osw) left bottom no-repeat;
	z-index: 100;
}
.tab-head > a.selected:after {
	width: 67px;
	height: 170px;
	background: url(http://cs14101.vk.me/c610520/u42408336/docs/0acd6dec920f/tab_active_right.png?extra=EWdJNDHCLk9gng1cE2WUmw2hwKp4ls68zkGGH9nfQg2hRENedO-ep-PD1IR1jaYqjHMSJHGo2uoAO8dKWf9eOtpZTgjexAI) no-repeat;
}
.tab-head > a .title {
	position: relative;
	z-index: 110;
}