JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="wrapper">
		<div id="div1">
			<div id="center">
				<img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg">
			</div>
		</div>
		<div id="div2">
		You can't see this without scrolling
		</div>
	</div>
	</body>

CSS

#wrapper{
				width: 100%;
			}
			#div1, #div2{
				position: absolute;
				height: 100%;
				width: 80%;
			}
			#div1, #div2, img{
				left: 0;
				right: 0;
				margin: auto;
			}
			#div1{
				background-color: red;
			}
			#div2{
				background-color: blue;
				top: 100%;
			}
			img{
				display: block;
				width: 40%;
				height: auto;
			}