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. Sea in mollis vidisse liberavisse, eros dicam per ut, ut cibo doctus evertitur duo. In quot viderer his, labore invenire assueverit mea ad. Solum nullam ut nec. Ut cum eripuit vocibus, no ius voluptua iudicabit repudiandae, illum graeci persequeris per ne.</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;
			float: right;
		}
		figure div {
			height: 160px;
			width: 220px;
			border: 1px solid black;
			background-color: #519834;
			padding: 10px;
			
			margin: 0 10px 10px 0;
		}
		figcaption {
			font-size: 90%;
			font-style: italic;
		}