JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Monster of Berwick</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    
    <body id="wrapper">
        <article id="main">
            <header id="head">
                <img src="images/banner.jpg" alt="banner" title="banner" />
            </header>
            <aside id="right">
                <img src="images/image2.jpg" alt="Image2" title="Image2" />
                <hr>
                <p class="p">If you go down to the woods tonight… you probably won’t believe your eyes. Because judging by footage from a hunting firm’s website, this crouching phantom looks like Spider-Man has swung on to the set of the Blair Witch Project. A deer hunter in the U.S. posted a video said to feature the creature on the Wildgame Innovations website – and the piercing white eyes aren’t the sort you would want to meet on a dark night. The hunter, who has chosen to remain anonymous, was so frightened he said he broke the camera but retrieved the image from its undamaged memory chip. The picture was taken on a reserve in Berwick near Morgan City, Louisiana.</p>
            </aside>
            <aside id="left">
                <img class="image1" src="images/image1.JPG" alt="Image1" title="Image1" />
                <hr>
                <p class="p">Skeptics will quickly give credence to this report from MovieWeb: More disturbing images have crept up on the Internet today in regards to J.J. Abrams‘s sci-fi thriller Super 8. No real plot details have been revealed at this time, but we do know that the story will gleefully nod to the past works of Steven Spielberg, primarily the science fiction movies he made in the late 70s and early 80s. Last Friday, a piece of concept art claiming to reveal an alien monster from the project started making the rounds. It has yet to be verified. Now, a strange photo has come forward, which is purported to be...

CSS

#wrapper {
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
}
#main {
    border-top:5px solid #FFFFFF;
    border-bottom:5px solid #FFFFFF;
    border-left:5px solid #FFFFFF;
    border-right:5px solid #FFFFFF;
    width:700px;
    margin: 25px 0px 0px 100px;
    color:white;
    position:absolute;
    left:22%;
}
#head {
    border-bottom:5px solid #FFFFFF;
    background-color:#000000;
}
#aside {
    border-left:5px solid #FFFFFF;
    width:375px;
}
#table {
    border-right:5px solid #FFFFFF;
    width:350px;
    background-color:#000000;
}
#tabletwo {
    border-left:5px solid #FFFFFF;
    width:350px;
    background-color:#000000;
    position:absolute;
    left:49%;
}
.image1 {
    position:relative;
    left:0px;
    top:10px;
}
.tableborder {
    border-bottom:5px solid #FFFFFF;
}
.footer {
    width:700px;
    border-bottom:5px solid #FFFFFF;
    border-left:5px solid #FFFFFF;
    border-right:5px solid #FFFFFF;
    border-top:5px solid #FFFFFF;
    background-color:#000000;
    position:relative;
    left:28%;
    bottom:-1200px;
    color:#FFFFFF;
    text-align:center;
    padding-top:25px;
    padding-bottom:25px;
    font-size:small;
}
.image3 {
    position:relative;
    left:17px;
}
#left {
    position:absolute;
    left:-5px;
    width:345px;
    top:160px;
    border-right:solid 5px #FFFFFF;
    border-left:solid 5px #FFFFFF;
    border-bottom:solid 5px #FFFFFF;
}
#right {
    position:absolute;
    width:350px;
    left:345px;
    top:160px;
    border-right:solid 5px #FFFFFF;
    border-left:solid 5px #FFFFFF;
    border-bottom:solid 5px #FFFFFF;
}
.hr {
    color:#FFFFFF;
}
.p {
    padding-left:15px;
    padding-right:5px;
    padding-top:5px;
    font-size:1.5em;
}