JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div class="one-page">
			<div class="fixed-size">
				this div is a fixed size
			</div>
			<div class="main-container">
				<p>
					<img src="http://images.clipartpanda.com/square-clip-art-clipart-square-shield-256x256-e296.png">
				</p>
				<div class="subtitle">
					subtitle text
				</div>
			</div>
		</div>
		<div class="other">
			something else
		</div>
  </body>

CSS

.one-page {
	min-height: 100vh;
	max-height: 100vh;
	background-color: #FF5555;
}

.fixed-size {
	height: 60px;
	border-style: solid;
}

.main-container {
	background-color: #55FF55;
	width: 300px;
	margin: auto;
}

.subtitle {
	text-align: center
}

.other {
	background-color: blue;
}

img {
	vertical-align: middle;
	width: 100%;
	height: auto;
}