JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-wrap">
  <header></header>

  <aside>
    <nav>
      <ul>
        <li><a href="#article1">Article1</a></li>
        <li><a href="#article2">Article2</a></li>
        <li><a href="#article3">Article3</a></li>
      </ul>
    </nav>
  </aside>

  <section>
    <article id="article1">Content Here</article>
    <article id="article2">Content Here</article>
    <article id="article3">Content Here</article>
  </section>

  <footer></footer>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overflow: scroll;
}

.main-wrap {
  overflow: hidden;
  position: relative;
}

header {
  position: relative;
  z-index: 3;
  height: 10vh;
}

aside {
  position: fixed;
  width: 22%;
  height: 84vh;
  /* Equal to 100vh - (header + footer)vh */
  top: 10vh;
  left: 0;
  bottom: 6vh;
}

section {
  position: relative;
  min-height: 84vh;
  /* Equal to 100vh - (header + footer)vh */
  width: 78%;
  left: 22%;
  /* Equal to aside width*/
}

footer {
  position: relative;
  z-index: 3;
  height: 6vh;
}