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">				
				<div class="subtitle">
					subtitle text
				</div>
			</div>
		</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: #ff00ff;
	width: 300px;
	margin: auto;
  padding:0;
  height:calc(100vh - 60px);
}

.subtitle {
	text-align: center
}

.other {
	background-color: blue;
}

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