JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype HTML>
<html lang="en">

<head>
    <title>test</title>
    <link rel="stylesheet" href="normalize.min.css" media="all">
    <link rel="stylesheet" href="test.css" media="screen">
</head>

<body>
    <main>
        <a href="#top"><img src="top.png" class="top"></a>
        <div class="text_container top">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames. Id consectetur purus ut faucibus pulvinar. Aliquam faucibus purus in massa. Nec dui nunc
                mattis enim. Volutpat consequat mauris nunc congue nisi. Volutpat odio facilisis mauris sit amet massa vitae tortor. In nisl nisi scelerisque eu ultrices vitae auctor. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit
                scelerisque. Euismod nisi porta lorem mollis aliquam. Scelerisque purus semper eget duis. Ut placerat orci nulla pellentesque dignissim enim sit. Aliquam ut porttitor leo a diam sollicitudin. Eleifend mi in nulla posuere sollicitudin aliquam
                ultrices sagittis.
            </p>
            <p>Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ut placerat orci nulla pellentesque dignissim enim sit amet. Eu non diam phasellus vestibulum lorem sed risus ultricies. Fames ac turpis egestas sed tempus urna et pharetra.
                Vulputate ut pharetra sit amet. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. In massa tempor nec feugiat nisl pretium. Morbi quis commodo odio aenean. Mattis vulputate enim nulla aliquet porttitor lacus luctus
                accumsan. Bibendum neque egestas congue quisque egestas. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Posuere sollicitudin aliquam ultrices sagittis orci. Tincidunt tortor aliquam nulla facilisi. Non arcu
                risus quis varius. Consequat nisl vel pretium lectus...

CSS

html,
body {
    height: 100%;
}

p {

}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    padding: 0 3rem;
    outline: 1px solid black;
    background-color: red;
    flex: 1 0 auto;
    padding-top: 2em !important;
    padding: 5em;
}

footer {
    outline: 1px solid black;
    flex-shrink: 0;
    background-color: yellow;
}

footer * {
    text-align: center;
    color: rgb(16, 16, 16);
    background-color: yellow;
}

.top {
    position: fixed;
    bottom: 0.7em;
    right: 0.7em;
    background: green;
    padding: 0.5em;
    border-radius: 50%;
}


/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */

@media screen and (prefers-reduced-motion: no-preference) {
    html,
    body {
        scroll-behavior: smooth;
    }
}