JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>

CSS

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	/*overflow: hidden;*/
}

#container1 {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: blue;
}

#container2 {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: -100%;
	background-color: red;
}

#container3 {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 2;
	left: 100%;
	background-color: green;
}

#container4 {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 100%;
	left: 0;
	background-color: orange;
}