JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Christian Symbolism in Fine Art</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.style1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: bold;
	color: #FFFFFF;
}
.style4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.style7 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.style8 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
}
.style11 {
	font-size: 20px;
	color: #660000;
}
.style12 {
	font-size: 100px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
}
.auto-style1 {
	margin-top: 41px;
}
.auto-style2 {
	margin-left: 51px;
}
-->
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="825" height="1400">
	<!-- MSTableType="layout" -->
	<tr>
		<td><div id="Layer1" style="position:absolute; width:514px; height:115px; z-index:1; left: 230px; top: 80px;"><img src="http://www.learningbygrace.org/christianSymbolism/images/banner.jpg" width="533" height="125"></div>
	      <div id="Layer9" class="style12" style="position:absolute; width:153px; height:99px; z-index:9; left: 617px; top: 580px;">abc</div>
	      <div id="Layer8" style="position:absolute; width:535px; height:138px; z-index:8; left: 230px; top: 434px"><span class="style4">Symbolism can be found in other areas of our lives as well. Language is inherently symbolic, and in fact is a rather complex system of symbols. The letters on this screen combine to form a symbol...

CSS

html {
  background-color: white;
  padding: 10px;
  font-family: sans-serif;
  font-size: 15px;
}

body {
  background-color: #f6f6f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  display: table;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 0;
  width: 100%;
}

address {
  position: absolute;
  top: 70px;
  right: 6px;
  text-align: right;
  font-size: smaller;
  font-style: normal;
}

h1 {
  position: absolute;
  left: 120px;
  top: 40px;
  font-size: larger;
  font-weight: normal;
  text-decoration: underline;
}

ol {
  border-left: 2px solid rgba(255, 0, 30, .25);
  border-right: 2px solid rgba(255, 0, 30, .05);
  padding: 0;
  margin: 0;
  margin-left: 100px;
  margin-right: 100px;
  position: relative;
  z-index: 0;
  float: left;
}

ol li {
  padding: 0;
  margin-left: -104px;
  margin-right: -81px;
  padding-left: 110px;
  padding-right: 100%;
  line-height: 30px;
  width: 100%;
}

ol li:first-child {
  border-top: 2px solid rgba(0, 160, 255, .1);
  margin-top: 120px;
}

ol li:last-child {
  margin-bottom: 50px;
}

ol::after {
  position: absolute;
  bottom: 50px;
  right: -65px;
  color: rgba(0, 160, 255, .16);
  line-height: 30px;
  font-weight: 400;
  font-family: 'Mrs Sheppards', cursive;
  letter-spacing: 2px;
}

ol::before {
  content: "";
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5) inset;
  height: 25px;
  width: 25px;
  border-radius: 25px;
  position: absolute;
  top: 105px;
  left: -75px;
}

body::before {
  content: ;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5) inset;
  height: 25px;
  width: 25px;
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 27px;
}

body::after {
  content: ;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5) inset;
  height: 25px;
  width: 25px;
  border-radius: 25px;
  position: absolute;
  bottom: 105px;
  left: 27px;
}

.container {
  width: auto;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

em {
 ...

JavaScript

window.onresize = window.onload = drawLines;

function drawLines() {
  var container = document.getElementById('container');
  var pagelines = document.getElementById('pagelines');

  // Clear any previous lines
  pagelines.innerHTML = "";

  // Add the individual lines
  for (var i = 150; i < container.clientHeight - 40; i += 30) {
    pagelines.insertAdjacentHTML(
      'beforeend',
      '<div class="pageline" style="top:' + i + 'px"></div>'
    );
  }
}