JSFiddle - React, Tailwind, and code Playground
HTML
<div id="BlightBox">
<div id="BlightOne">
<div id="Premise">
<br />
<div id="PremiseTitle">Lorem Ipsum</div>
<div id="PremiseMain">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum orci mi, finibus non libero non, dictum vulputate tortor. Phasellus rutrum laoreet congue. Vestibulum et justo massa. Donec vitae mauris ligula. Cras ac maximus quam. Nam commodo lorem at imperdiet lobortis. Nunc nec porta lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac ante id odio fermentum porta. Etiam quis sapien orci. Pellentesque lobortis ornare commodo. Duis blandit semper maximus. Sed at imperdiet orci. Aliquam vitae finibus elit, at egestas libero.</div>
</div>
</div>
<div id="meat">
<br />
<br />
<div id="Sympathy">{ Please allow me to introduce myself;
<br />I'm a man of wealth and taste }</div>
<br />
<br />
<div id="ForThe">I've been around for a long, long year
<br />Stole many a man's soul and faith
<br />I was around when Jesus Christ
<br />Had his moment of doubt and pain
<br />Made damn sure that Pilate
<br />Washed his hands and sealed his fate
<br />...</div>
<br />
<br />
<div id="Devil">{ Pleased to meet you;
<br />Hope you guessed my name }</div>
</div>
<div id="BlightTwo">
<div id="OOC">
<br />
<div id="OOCTitle">Cthulu Fhtagn</div>
<div id="OOCMain">
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum orci mi, finibus non libero non, dictum vulputate tortor. Phasellus rutrum laoreet congue. Vestibulum et justo massa. Donec vitae mauris ligula. Cras ac maximus quam. Nam commodo lorem at imperdiet lobortis. Nunc nec porta lorem. Vestibulum ante ipsum...
CSS
body {
background:#000
}
#profile-container {
background:none
}
#BlightBox {
position:relative;
width:1250px;
margin-left:auto;
margin-right:auto;
border:5px groove #530D1C;
box-shadow:0 0 300px -16px rgba(125, 113, 96, 1)
}
#BlightOne {
background:url(http://i.imgur.com/1EfrpRu.png);
width:470px;
height:600px;
float:left;
box-shadow:inset 0 0 80px rgba(0, 0, 0, 1)
}
#Premise {
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
color: white;
}
#PremiseTitle {
text-align: center;
font-family:'Cinzel Decorative', cursive;
font-size: 40px;
font-weight: bold;
text-shadow: rgb(0, 0, 0) 2px 2px 0px, rgb(0, 0, 0) 4px 4px 0px;
}
#PremiseMain {
padding: 55px;
font-family:'Cinzel', serif;
font-size: 14px;
text-align: justify;
line-height: 25px;
text-shadow: rgb(0, 0, 0) 2px 2px 0px, rgb(0, 0, 0) 4px 4px 0px;
}
#meat {
display:inline-block;
background:url(http://i.imgur.com/ufDe9XX.png);
background-repeat:repeat;
width:310px;
height:600px;
text-align:center;
box-shadow:inset 0 0 80px rgba(0, 0, 0, 1)
}
#Sympathy {
font-family:'Cinzel Decorative', cursive;
font-size:13px;
font-style:italic;
font-weight:bold;
color:#ccc
}
#ForThe {
font-family:'Cinzel', serif;
font-size:9pt;
font-weight:bold;
line-height:50px;
color:#ccc
}
#Devil {
font-family:'Cinzel Decorative', cursive;
font-size:16px;
font-style:italic;
font-weight:bold;
color:#ccc
}
#BlightTwo {
background:url(http://i.imgur.com/ObVPbGz.png);
width:470px;
height:600px;
float:right;
box-shadow:inset 0 0 80px rgba(0, 0, 0, 1)
}
#OOC {
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
color: white;
}
#OOCTitle {
text-align: center;
font-family:'Cinzel Decorative', cursive;
font-size: 40px;
font-weight: bold;
text-shadow: rgb(0, 0, 0) 2px 2px 0px, rgb(0, 0,...
JavaScript
WebFontConfig = {
google: {
families: ["Cinzel::latin", "Cinzel+Decorative::latin"]
}
},
function () {
var a = document.createElement("script");
a.src = ("https:" == document.location.protocol ? "https" : "http") + "://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js", a.type = "text/javascript", a.async = "true";
var b = document.getElementsByTagName("script")[0];
b.parentNode.insertBefore(a, b)
}();