JSFiddle - React, Tailwind, and code Playground

by Grzegorz Matyszewski

HTML

<body>
		<div class="wrapper">
				<div class="content">
					<main>
						<div class="article-wrapper">
							<article id="home">
								<h1>This is the home page</h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quae ipsa dolor quidem ipsum, repudiandae maiores ad aliquam in necessitatibus incidunt. Quibusdam alias beatae temporibus culpa, esse ipsam, rem ducimus.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quae ipsa dolor quidem ipsum, repudiandae maiores ad aliquam in necessitatibus incidunt. Quibusdam alias beatae temporibus culpa, esse ipsam, rem ducimus.</p>
							</article>													
						</div>
					</main>
				</div>
		</div>
    </body>

CSS

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
main {
  background-color: rgba(0, 0, 0, 0.85);
}
.content {
  display: table;
}
.wrapper {
  position: relative;
  height: 100%;
}
.content {
  width: 1060px;
  position: absolute;
  padding: 140px 0 200px 0;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -530px;
}
main {
  width: 742px;
  /* padding: 2em; */
  position: relative;
  font-size: 1.5em;
  display: table-cell;
  vertical-align: middle;
}
main .article-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: red;
  position: relative; /* for IE only! */
}
main .article-wrapper article {
  background-color: purple;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}