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">

    <title>Josh.vet</title>
    <link rel='stylesheet' type='text/css' href="{% static 'main_site/main.css' %}">
    <script src="https://kit.fontawesome.com/70a3cd9171.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="side-pane" id="sidenav">
    <button class="pane-button" id="close" onclick="closeNav()">
        <i class="fas fa-chevron-left"></i>
    </button>
    <a href="{% url 'home' %}" class="side-nav-a">Home</a>
    <a href="{% url 'about' %}" class="side-nav-a">About</a>
    <a href="{% url 'links' %}" class="side-nav-a">Links</a>
</nav>
<div class="container" id="main">
    <header>
        <div id="logo-container"><a href="{% url 'home' %}"><img src="https://www.josh.vet/static/josh.vet/main_site/images/j-logo-2.svg" alt="J logo" id="logo"></a></div>
        <div id="terminal"><span class="green">user@localhost</span><span>:</span><span class="blue">~</span><span id="git">$git pull</span>&nbsp;josh.vet</span><span class="blink">&nbsp;</span></div>
        <nav id="topnav">
            <ul class="nav-ul">
                <a href="{% url 'home' %}" class="navlink"><li>Home</li></a>
                <a href="{% url 'about' %}" class="navlink"><li>About</li></a>
                <a href="{% url 'links' %}" class="navlink"><li>Links</li></a>
            </ul>
        </nav>
    </header>
    <button class="pane-button" id="open" onclick="openNav()"><i class="fas fa-chevron-right"></i></button>
    <main>
        <h1 class="green">Header</h1>
        <div class="content">Description</div>
    </main>
    <footer>
        <p class="centered-text" id="footer-text">© Josh 2021</p>
    </footer>
</div>

<script>
function openNav() {
  document.getElementById("sidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}
</script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');

html {
    height: 100%;
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;

}
body {
    background: #333333;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    color: #AAA;

}
#main {
    margin: 0.5em 0.5em 0.5em 0.5em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    border: 1px solid black;
    border-radius: 12.5px;
    min-height: 100%;
    width: 100%;
}
#open {
    display: none;
}
#git{
    white-space: nowrap;
}

header {
    display: flex;
    justify-content: space-between;
    background: #222222;
    border-radius: 12.5px 12.5px 0 0;
    height: 4rem;
}
#terminal {
    display: flex;
    align-items: center;
    justify-content: center;
}

#topnav {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}
.nav-ul {
    height: 100%;
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0;
}
.nav-ul a{
    display:flex;
    align-items: center;
    margin-right: 1rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;

}

.pane-button {
    font-size: 3em;
    max-width: 3rem;
    background: inherit;
    border: none;
    color: inherit;
    padding: 0;
    margin: 0;
}

.side-pane {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.side-nav-a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
#close {
    align-self: flex-end;
}

#logo-container{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content:...