JSFiddle - React, Tailwind, and code Playground

HTML

<span id="section-1"></span><span id="section-2"></span><span id="section-3"></span><span id="section-4"></span>
<div>
	<div>
		<a href="#section-2">→</a>
		<a href="#section-3">↓</a>
	</div><!--
 --><div>
		<a href="#section-1">←</a>
		<a href="#section-4">↓</a>
	</div><!--
 --><div>
		<a href="#section-1">↑</a>
		<a href="#section-4">→</a>
	</div><!--
 --><div>
		<a href="#section-3">←</a>
		<a href="#section-2">↑</a>
	</div>
</div>

CSS

html, body {overflow: hidden;height: 100%;margin: 0;counter-reset: section;}
body>div {position: relative;width: 200%;height: 100%;top: 0;left: 0;transition: .3s ease;}
body>span {position: absolute}
body>div>div {position: relative;display: inline-block;vertical-align: middle;width: 50%;height: 100%;}
body>div>div:before {counter-increment: section;content: counter(section);position: absolute;top: 45%;left: 45%;font: 50px sans-serif;}

a {display: inline-block;width: 30px;height: 30px;border: 1px solid;text-align: center;text-decoration: none;line-height: 30px;color: #000;}

body>div>div:nth-of-type(1) {background: red}
body>div>div:nth-of-type(2) {background: blue}
body>div>div:nth-of-type(3) {background: orange}
body>div>div:nth-of-type(4) {background: green}

#section-1:target~div {top: 0;left: 0}
#section-2:target~div {top: 0;left: -100%}
#section-3:target~div {top: -100%;left: 0}
#section-4:target~div {top: -100%;left: -100%}