JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		<header>
		
		</header>
		<nav>
			<p>Navigation</p>
		</nav>
		<main>
			<p><i>Magazine</i>, 1985, 4, p. 12-14</p>
			<article>
                <figure>
					<div>
						IMG
					</div>
					<figcaption>
						Caption.
					</figcaption>
				</figure>
                
				<header>			
					<h1>Heading</h1>
					<p>Subheading</p>
				</header>
				
				
				<p>Lorem ipsum dolor sit amet, qui primis tritani in, has et constituto interesset, erant nullam aperiam est an. Sit alia omittam te, in dolorem tincidunt abhorreant nec, velit sonet referrentur eam ne. Ex vim essent tacimates perpetua, sea in quod disputando. Ignota facilis accusam mel in, id vel case nulla sapientem, nulla elitr deterruisset ex vel. Et ullum ubique per, esse omnesque in per, ea mutat neglegentur contentiones eum.</p>
			</article>
		</main>
	</div>

CSS

* {
			box-sizing: border-box;
		}
		#wrapper {
			width: 840px;
			margin: 0 auto;
			height: auto;
		}
		header {
			height: 120px;
			background-color: #765765;
			width: 100%;
		}
		nav {
			width: 39%;
			height: 450px;
			margin-right: 1%;
			background-color: #ddee77;
			float: left;
			padding: 2%;
		}
		main {
			background-color: #ccc888;
			width: 60%;
			height: 450px;
			float: left;
			padding: 2%;
		}
		article header {
			height: auto;
			background-color: #ccc888;
			width: auto;
		}
		h1 {
			margin: 5px 0;
		}
		figure {
			margin: 0;
			}
		figure div {
			height: 120px;
			width: 100%;
			border: 1px solid black;
			background-color: #519834;
			padding: 10px;
			
			margin: 0 10px 10px 0;
		}
		figcaption {
			font-size: 90%;
			font-style: italic;
		}