<div id="tab0"><div class="inner">First Tab</div></div>
<div id="tab1"><div class="inner">Second Tab</div></div>
<div id="tab2"><div class="inner">Third Tab</div></div>
<div id="tab3"><div class="inner">Force Tab</div></div>
<div id="tab4"><div class="inner">Fifth Tab</div></div>

html,body {
	margin: 0;
}
.tab, #tab0, #tab1, #tab2, #tab3, #tab4 {
	height: 100%;
	position: absolute;
	box-shadow: 6px 0px 3px rgba(0, 0, 0, 0.1);
	transition: all 0.5s ease;
}
.tab:hover ~ div, #tab0:hover ~ div, #tab1:hover ~ div, #tab2:hover ~ div, #tab3:hover ~ div, #tab4:hover ~ div {
	transform: translateX(-92vw);
}
#tab0 {
	width: 100vw;
	background: #E6EE9C;
}
#tab1,#tab2,#tab3,#tab4 {
	width: 95vw;
}
#tab1 {
	background: #C5E1A5;
}
#tab2 {
	background: #A5D6A7;
}
#tab3 {
	background: #80CBC4;
}
#tab4 {
	background: #80DEEA;
}
#tab1::after, #tab2::after, #tab3::after, #tab4::after {
	content: '';
	position: absolute;
	width: 4vw;
	height: 15vh;
	border-radius: 0 20px 20px 0;
	right: -4vw;
}
#tab1::after {
	background: #C5E1A5;
	top: 45%;
}
#tab2::after {
	background: #A5D6A7;
	top: 30%;
}
#tab3::after {
	background: #80CBC4;
	top: 15%;
}
#tab4::after {
	background: #80DEEA;
	top: 0;
}
.inner {
	position: absolute;
	top: 25%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	line-height: 1.2;
	color: #fff;
}