JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="box">
	<div class="header">header</div>
	<div class="body">
		<div class="image">
			<img src="http://placehold.it/300x300" alt="">
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, omnis eaque. Voluptatem optio labore dicta, at molestiae esse minima vitae suscipit doloremque veniam reiciendis, et facilis omnis voluptas laboriosam mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, omnis eaque. Voluptatem optio labore dicta, at molestiae esse minima vitae suscipit doloremque veniam reiciendis, et facilis omnis voluptas laboriosam mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, omnis eaque. Voluptatem optio labore dicta, at molestiae esse minima vitae suscipit doloremque veniam reiciendis, et facilis omnis voluptas laboriosam mollitia.</p>
	</div>
	<div class="footer">footer</div>
</div>

SCSS

* {
	margin: 0;
}

.box {
	background: #eee;
	display: flex;
	height: 100vh;
	flex-direction: column;
	font-family: sans-serif;
	width: 200px;
}

.header, .footer {
	background: #ddd;
	padding: 1rem;
	text-align: center;
}

.body {
	flex: 0 1 auto;
	/* overflow: auto; */
}

.image {
	opacity: 0.5;
	padding: 1rem;
	position: relative;
	img {
		position: absolute;
	}
}