JSFiddle - React, Tailwind, and code Playground

by James Gill

HTML

<div class="volume_title_page">
		<div>
			<p class="chaos_subtitle_text_1">OPISCULUM DAEMONIS</p>
			<h1 class="chaos_title_text">LIBER</h1>
			<h1 class="chaos_title_text">CHAOTICA</h1>
			<h3 class="chaos_subtitle_text_2"><span>Volumes One To Five</span></h3>
			<p class="chaos_subtitle_text_1">WITH FORMER INVESTIGATIONS DILIGENTLY COMPARED AND REVISED</p>
			<p class="centered_text">---0---</p>
			<h3 class="chaos_subtitle_text_3">And expository lectures on the followers and rituals of Chaos</h3>
			<p class="centered_text">---0---</p>
			<p class="centered_text">BEING IN THE MAIN AN EXAMINATION OF THE DAEMONIC AND MORTAL ARMIES OF CHAOS, AND IN PART, BEING A DESCRIPTION OF THE NUMBERLESS UNNATURAL CREATURES THAT DO ACCOMPANY THEM</p>
			<p class="centered_text"><img width="70" height="100" alt="Liber Chaotica Volume Title Page Image" src="images/Liber Chaotica Cover.jpg"/></p>
			<p class="centered_text">FEATURING TEXTS COMPILED AND ANNOTATED BY THE AUTHOR RICHTER KLESS</p>
			<p class="centered_text">Illustrated and illuminated with numerous plates compiled by the author</p>
			<p class="centered_text">Printed by Johannes Innsbrook, Printer to Albertus Mansoul,</p>
			<p class="centered_text">Bound by Christoph Hassel of Wolfenburg</p>
		</div>
	</div>

CSS

.chaos_subtitle_text_2 {
  font-family: "PlainGermanica", sans-serif;
  text-align: center;
  --headingLineOffsetFromText: 10px;
  position: relative;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}

.chaos_subtitle_text_2 span {
  position: relative;
  display: inline-block;
}

.chaos_subtitle_text_2 span:before,
.chaos_subtitle_text_2 span:after {
  content: "";
  border-bottom: 10px double black;
  width: 5000px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.chaos_subtitle_text_2 span:before {
  right: calc(100% + var(--headingLineOffsetFromText));
}

.chaos_subtitle_text_2 span:after {
  left: calc(100% + var(--headingLineOffsetFromText));
}

.volume_title_page {
  border: 2rem var(--volume_title_border_colour);
  border-top-style: ridge;
  border-bottom-style: groove;
  border-left-style: groove;
  border-right-style: ridge;
  border-radius: 0;
  margin-left: auto;
  margin-right: auto;
  width: 700px;
}

.volume_title_page div {
  margin: 2rem 5.1rem;
}

.centered_text {
  text-indent: 0;
  text-align: center;
}

.chaos_title_text {
  color: var(--blood_text_colour);
  font-family: "Abaddon™", sans-serif;
  text-indent: 0;
  text-align: center;
}

.chaos_subtitle_text_1 {
  font-family: "Abaddon™", sans-serif;
  text-indent: 0;
  text-align: center;
}