JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div id="main">
        <main>
			            
        </main>
    </div>
    <div>another div</div>
</div>

CSS

html,body{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.wrap{
	position: relative;
	z-index: auto;
	width: 100%;
	max-width: 960px;
	height: 100%;
	margin: 0 auto;
}
#main{
	width: 100%;
	height: 70%;
	border: 1px solid red;
}
main{
	max-width: 100%;
	height: 100%;
	background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqHMio3jll2W62WXJHbufc-xxYPxec_ip8Ez0lQv2P7Umy2kPKrw) no-repeat top center;
	background-size: contain;
}