JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html>
    <head>
    <title>This is just a title for kicks</title>
    <link rel="stylesheet" type="text/css" href="styles/whoopie.css"
    media="all" />
    <meta charset="UTF-8">
    </head>
    <body>
        <!--Content starts here. Nonsensical comment ends in 3...2...-->
        <h1 class ="header" dir="ltr">Link -><a href="images">!</a></h1>

        <p class="middle" dir="ltr" lang="en-GB"
                title="Explanatory title">
                        Tidbit of info</p>
        <p class="btw" dir="ltr" lang="en-GB" title="Funny title?">
                No, no joke here "/
        <br>
        <br>More text
        <br>
        <br>Even more text
        <br>And yes, these are meant to be on seperate lines.
        <br>
        <br>This is the final line</p>
    </body>
    </html>

CSS

html {
        margin: 0;
        height: 100%;
        color: black;
        background-color: #ddd;
        border: 1.2em inset #000;
        font-family: Georgia, sans-serif;
}

h1 {
        font-size: 6.25em;
        margin: 0;
}

.middle {
        position: absolute;
        bottom: 50%;
}

.btw {
        position: absolute;
        bottom: 0;
}