JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Page content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim sed eros fringilla sodales a ac ligula. Phasellus rhoncus ex nisl, sed efficitur quam interdum eget. Praesent maximus fringilla dolor nec bibendum. Etiam et feugiat nibh. Suspendisse potenti. Nullam sodales felis eget sagittis ultricies. Integer imperdiet sit amet est a ornare. Ut at vestibulum orci.</p>
<p>Etiam pharetra, dui eget rhoncus congue, enim enim laoreet diam, vel tempor nibh sem lacinia sem. Cras varius, mi et faucibus scelerisque, eros nulla suscipit massa, nec facilisis justo massa quis justo. Etiam quis laoreet purus. Quisque auctor magna enim, ut sodales lorem pulvinar vel. Maecenas non justo risus. Sed sem urna, suscipit interdum pharetra quis, consequat in magna. Donec cursus elit at interdum euismod. Donec lacinia convallis mauris vitae venenatis. Donec sapien ligula, lacinia sed hendrerit vulputate, ornare pretium urna. Ut turpis orci, consequat fringilla sem eu, rhoncus maximus dolor. Integer sit amet fringilla ex, sit amet condimentum massa.</p>
<p>Etiam et finibus augue, nec laoreet erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vel mauris lacinia massa faucibus ultrices. Nunc in interdum urna. In hac habitasse platea dictumst. Etiam pretium suscipit semper. Proin nec elit mi. Pellentesque dictum sed dui vel placerat.</p>
<p>Sed congue ipsum ut sodales lobortis. Donec quis feugiat nunc. Mauris vestibulum vel massa ut scelerisque. Suspendisse efficitur et augue in faucibus. Nam dictum rhoncus tempor. Suspendisse pretium ac dolor at dictum. Quisque ac dictum metus. Ut felis ex, mollis eget euismod ac, elementum at elit. Mauris in nisl tortor. Aliquam varius commodo erat, in molestie nisi euismod ut. Sed non velit sit amet odio accumsan ultrices a eleifend lorem. Duis et felis lectus. Integer sollicitudin orci sed nulla accumsan, sollicitudin interdum lectus tristique. Fusce eget sapien...

CSS

body {
  font-size: 150%;
	font-family: Meiryo,Verdana,sans-serif;
	margin: 0;
	height: 100%;
}
html {
	overflow-y: scroll;
	height: 100%;
}

.dialog {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 1000000;
	background-color: rgba(193, 208, 145, 0.75);
	text-align: center;
	overflow: auto;
}
.dialog > div {
	display: table;
	width: 100%;
	height: 100%;
}
.dialog > div > div {
	display: table-cell;
	vertical-align: middle;
}
.dialog > div > div > div {
	display: inline-block;
	text-align: left;
	min-width: 300px;
	max-width: 640px;
	border: 1px solid #004000;
	background-color: #e2ffcd;
	border-radius: 6px;
}
.dialog > div > div > div > h3 {
	background-color: #64493e;
	border-bottom: 1px solid #321;
	color: #ccc;
	text-align: left;
	padding: 4px;
	margin: 0;
}
.dialog > div > div > div > h3:first-child {
	border-radius: 5px 5px 0 0;
}
.dialog > div > div > div > div {
	padding: 4px;
	color: #004000;
}
.dialog > div > div > div > div::after {
	content: "";
	display: block;
	clear: both;
}