JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Title</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" />
</head>

<body>
    <header>
        <h1>Test Title <span class="author">by author</span></h1>
        <nav>
            <a>Home</a>
            <a>About</a>
            <a>Links</a>
            <a>Projects</a>
        </nav>
    </header>
    <main>
        <section class="col-1">
            <div class="article">
                <h2><span class="post-date">18 Sep 22</span> Article Title</h2>
                <p class="para-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates,...

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0 5px 25px;
    background-color: #eee;
    font-family: Roboto, sans-serif;
    font-size: 0.9rem;
    color: #333;
    font-weight: 300;
    overflow: hidden;
}

/* HEADER CONTENT */
header {
    padding-bottom: 5px;
}

h1 {
    margin: 0;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.author {
    font-size: 1rem;
    font-weight: 300;
}

nav {
    border: 2px solid #ffc800;
    font-family: 'Space Mono', serif;
    font-size: 0.9rem;
    text-align: center;
    word-spacing: 1rem;
}

nav a {
    color: #333;
    border: 1px solid transparent;
    text-decoration: none;
}

/* MAIN BODY CONTENT */
main {
    display: grid;
    grid-template-columns: minmax(25rem, 1fr) minmax(25rem, 1fr) minmax(25rem, 1fr);
    column-gap: 1rem;
}

.col-1 {
    grid-column: 1;
    overflow-y: auto;
}

.col-2 {
    grid-column: 2;
    overflow-y: auto;
}

.col-3 {
    grid-column: 3;
    overflow-y: auto;
}

.about {
    font-size: 1rem;
}

.puncushion {
    font-family: Anton, sans-serif;
}

.demonbutt {
    font-family: Roboto, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

h2 {
    font-family: Bitter, serif;
    font-size: 1rem;
    font-weight: 300;
}

h2 a {
    color: #333;
    text-decoration: none;
    border: 1px solid transparent;
}

.post-date {
    font-family: 'Space Mono', serif;
    font-size: 0.6rem;
    vertical-align: super;
}

.para-1 {
    margin: 0;
    font-family: Anton, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    text-indent: 5%;
}

p:not(.para-1), ul {
    font-family: 'Space Mono', serif;
}

/* OTHER */
.watermark {
    font-family: Anton, sans-serif;
    font-size: 2rem;
    color: transparent;
    text-align: center;
    text-shadow: 0 0 6px #52a85f;
    transform: translateY(-10px);
}

a:hover {
    border: 1px solid purple;
}

b:hover {
    font-family: Anton, sans-serif;
}

i:hover {
    font-family: Bitter, serif;
}

::-webkit-scrollbar...