JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="floor">
  <div class="item">
    <div class="left">
      <h1>left 1</h1>
    </div>
    <div class="right">
      <h1>right 1</h1>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <h1>left 2</h1>
    </div>
    <div class="right">
      <h1>right 2</h1>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <h1>left 3</h1>
    </div>
    <div class="right">
      <h1>right 3</h1>
    </div>
  </div>
  <div class="item">
    <div class="left">
      <h1>left 4</h1>
    </div>
    <div class="right">
      <h1>right 4</h1>
    </div>
  </div>
</div>
<ul class="controls">
  <li class=""><a href="#" class="prev"><i class="fa fa-chevron-left"></i></a></li>
  <li class=""><a href="#" class="next"><i class="fa fa-chevron-right"></i></a></li>
</ul>

CSS

.floor {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden
}
.floor .item {
	background: #3FA0F0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100vh;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.floor .item.selected {
	visibility: visible;
}
.controls {
	position: absolute;
	z-index: 9999;
	list-style: none
}
.show_control {
	visibility: visible
}
.hide_control {
	visibility: hidden
}
.item .left {
	background: #3FF0BB;
}
.item .right {
	background: #F03F9C;
}
.item .left, .item .right {
width: calc(50vw - (20px));
	height: calc(100vh - 40px);
	top: 0;
	left: 0;
	right: auto;
	bottom: 0;
	margin: auto;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	transition: -webkit-transform 1s;
	transition: transform 1s;
	transition: transform 1s, -webkit-transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}
.item .spin-fwd {
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}
.item .spin-bwd {
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
}
.item .spin-fwd.right {
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
}
.item .spin-bwd.right {
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

JavaScript

$(".floor").children(".item").eq(0).addClass("selected");

    if ($('.floor .item:first-child').hasClass("selected")) {
        $('.controls li a.prev').addClass("hide_control");
    }

    $('.controls li a.prev').on("click", function(e) {
        e.preventDefault();
        $(".floor .item.selected").removeClass("selected").prev().addClass("selected");
        $('.controls li a.next').removeClass("hide_control");

        if ($('.floor .item:first-child').hasClass("selected")) {
            $('.controls li a.prev').addClass("hide_control");
        }

    });

    $('.controls li a.next').on("click", function(e) {
        e.preventDefault();
        $(".floor .item.selected").removeClass("selected").next().addClass("selected");       

        $('.controls li a.prev').removeClass("hide_control");

        if ($('.floor .item:last-child').hasClass("selected")) {
            $('.controls li a.next').addClass("hide_control");
        }

    });