JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
</div>
<div class="about">
  <div>
  testing
  </div>
</div>
<div class="footer">
</div>

CSS

body {
background-image: url('http://dl4.glitter-graphics.net/pub/966/966814i8pz6zikwc.gif');
background-attachment: fixed;
background-repeat: repeat;
padding: 3% 5%;
display: grid;
box-sizing: border-box;
gap: 7px;
}

.nav, .about, .footer {
    background-color: pink;
}

.nav {
    grid-area: 1/1/2/2;
    height: 750px; width: 250px;
    overflow: scroll;
    text-align: left;
}

.about {
    grid-area: 1/2/2/3;
    height: 750px; width: 950px;
    overflow: scroll;
    text-align: left;
}

.about div {
  padding:10px;
}

.footer {
    grid-area: 2/1/3/3;
    height: 150px; width: 1200px;
    text-align: center;
}