JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>chapterInfo.title</title>
</head>
<body>
<div class="content">
<h1>
<p class="chapterTitle">chapterInfo.title</p>
<small> By: <a href="...">chapterInfo.author_name</a></small>
</h1>
<div>
<a href="previouschapter.html">Go back</a>
</div>
<p class="chapterText">chapterInfo.content</p>
<br>
<p><b> The End. </b></p>
<p><b> Your choices: </b></p>
<ol class="chapterSelection">
<li> <b><a href="choicedescent">choice</a></b></li>
<li>choice</li>
</ol>
<br>
<a href = "outline.html" class="outline">View all chapters</a>
<br>
<p><b>Retrieved date</b></p>
<h1>title</h1>
<ul>
<li class="outLineTitles">
<a href="descents[i].html">
<div class="parent">
<p class="chapterNumbers">descents[i]#</p>
<p class="chapterNames">names[i]</p>
</div>
</a>
</li>
<li class="outLineTitles">
<a href="descents[i].html">
<div class="parent">
<p class="chapterNumbers">descents[i]#</p>
<p class="chapterNames">names[i]</p>
</div>
</a>
</li>
<li class="outLineTitles">
<a href="descents[i].html">
<div class="parent">
<p class="chapterNumbers">descents[i]#</p>
<p class="chapterNames">names[i]</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
body {
background: lightgray;
}
.content {
width: 80%;
margin: 0 auto;
padding: 10px 10px;
background: white;
}
.content ul {
list-style: none;
}
h1 small {
font-size: 50%;
}
li.outLineTitles{
font-size:130%;
line-height:135%;
}
.chapterText{
font-size: 25px;
}
.chapterSelection{
font-size:115%;
line-height:120%;
}
.outline{
font-size:110%;
}
.chapterNumbers{
word-spacing:25px;
float:left;
font-size:150%;
}
.parent .chapterNames{
float:left;
}
.chapterTitle{
}