JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="stg">
		<div class="wrap">
			<div class="bkgl"></div>
			<div class="bkgr"></div>
			<div class="bkgc"></div>
			<div class="bkgc2"></div>
			<div id="us" class="btn">
				<div class="arrw top"><div class="arr"></div></div>
				<div class="arrw bottom"><div class="arr"></div></div>
			</div>
			<div id="them" class="btn">
				<div class="arrw top"><div class="arr"></div></div>
				<div class="arrw bottom"><div class="arr"></div></div>
			</div>
		</div>
	</div>

CSS

html,
body{
 height:100%;
	margin: 0;
}
#stg{
	position: relative;
	width:100%;
	height:100%;
	overflow: hidden;
}
.wrap{
	position: absolute;
	width: 100%;
	height:100%;
	margin-left: -100%;
}
.bkgl{
	position: absolute;
	width: 150%;
	height: 100%;
	left: 0;
	background-color: #231F20;
}
.bkgr{
	position: absolute;
	width: 150%;
	height: 100%;
	left: 150%;
	background-color: #231F20;
}
.bkgc2,
.bkgc{
	position: absolute;
	width: 70%;
	height: 100%;
	left: 150%;
	margin-left: -35%;
	background-color: #e55;
}

.p0 .bkgc{
	left: 50%;
	margin-left: 35%;
}

.p2 .bkgc{
	left: 250%;
	margin-left: -105%;
}

.btn{
	position: absolute;
	left: 150%; 
	top:50%; 
	margin-top: -60px;
	cursor: pointer;
}
#us{
	margin-left:-35%;
}
#them{
	margin-left:35%;
}

.p2 #them{
	margin-left:-35%;
	left: 250%;
}
.p0 #us{
	margin-left:35%;
	left: 50%;
}

.arrw{
	width: 120px; 
	height: 0; 
	position: relative;
}

#them .arrw{
	margin-left: -120px;
}

#us .arrw{
	margin-left: -60px;
}

.p0 #us .arrw,
#them .arrw{
	border-left:  0px solid transparent;
	border-right:  60px solid transparent;
}

.p2 #them .arrw,
#us .arrw{
	border-left:  60px solid transparent;
	border-right:  0px solid transparent;
}

.arrw.bottom{
	border-top:60px solid #e55;
	border-bottom:0px solid transparent;
}
.arrw.top{
	border-top:0px solid transparent;
	border-bottom:60px solid #e55;
}

.arr{
	width: 100px; 
	position: absolute;
}

.p2 #them .arr,
#us .arr{ 
	left:-40px; 
}
.p0 #us .arr,
#them .arr{ 
	left:20px; 
}
.bottom .arr{
	top:-60px;
}
.top .arr{ 
	bottom: -60px;
}

#us .bottom .arr{ 
	border-left: 40px solid transparent;
	border-top: 40px solid #231F20;
	border-right: 0px solid transparent;
	border-bottom: 0px solid transparent;
}
#us .top .arr{ 
	border-left: 40px solid transparent;
	border-top: 0px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 40px solid #231F20;
}
.p2 #them .top .arr,
.p2 #them .bottom .arr{
	border-left: 40px solid transparent;
	border-right: 0px solid...

JavaScript

/* By Eduardo Velez
 * @_SinMemoria
 */

$(document).ready(function(){
	var pos = 1;
	$('.btn').bind('click', function(){
		$('.wrap').removeClass('p'+pos);
			if(pos !=1){
				pos = 1;
			}else{
				if($(this).attr('id') == 'us'){
					pos--;
				}else{
					pos++;
				}
			}
		$('.wrap').addClass('p'+pos).css('margin-left', (pos * -100 )+'%');
	});
});