JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header>
	<nav>
		<a href='?p=faq#faq' id='faq'>
			FAQ
		</a>
	</nav>
</header>
<div class='leftSide'>
    <a href="#anchor" class="bgImage"><img src="img/some.png" style="
    position: relative;
    z-index: -1;
    opacity: .99;
    border: 1px solid red;
    width: 150px;
    height: 200px;
    background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>

CSS

* {
	box-sizing: border-box
}

body {
	margin: 0;
}

.leftSide{
	position: fixed;
	z-index: 0;
	top: 20px;
	right: 50%;
	transform: translateX(-50%);
	width: 808px;
	height: 100%;
	display: flex;
	justify-content: flex-end; 
	margin-right:-93px;
	padding: 15px 93px 90px 0;
}

.rightSide{
	position: fixed;
	z-index: 0;
	top: 20px;
	left: 50%;
	transform: translateX(50%);
	width: 808px;
	height: 100%;
	margin-left:-93px;
	padding: 15px 0 90px 93px;
}

a.bgImage {
    z-index:900;
    opacity:.99;
    border:2px dashed blue
}

.rightSide .bgImage {
margin-left: -93px;
}

.leftSide .bgImage {
margin-right: -93px;
}

main {
	width: 808px;
	min-height: 400px;
	margin: 20px auto 0;
	position: relative;
	z-index: 50;
	border-style: solid;
	border-width: 0px 93px 127px 93px;
	border-image: url(img/paperedge.png) 0 93 127 93 fill round;
	padding-top:10px;
}

header {
	height: 20px;
	background: #ffffff url(img/header_bg.png) repeat-x bottom;
	border-bottom: 1px solid #000000;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100
}

nav {
	display: flex;
	justify-content: center;
}