JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">

<!------------------------------- NAVIGATION BAR ---------------------------------------------->
  <div class="left-sidebar">
        <!------------------ NAV 1 BOOKS ------------------>

        <div id="navTab-books" class="navTab-content starter">
          <main class="window-border">
              <h1 class="window-titlebar">
                  books sidebar
              </h1>
                <div class="navTab-headers">
                  <button class="tab-link" data-target="tab-bookreviews">book reviews</button>
                  <button class="tab-link" data-target="tab-favebooks">fave books</button>
                </div>
            </main>
          </div>

          <!------------------ NAV 2 VIDEO GAMES ------------------>

          <div id="navTab-videogames" class="navTab-content hidden">
            <main class="window-border">
              <h1 class="window-titlebar">
                  video games sidebar
              </h1>
                <div class="navTab-headers">
                  <button class="tab-link" data-target="tab-vg1">video game 1</button>
                  <button class="tab-link" data-target="tab-vg2">video game 2</button>
                </div>
            </main>
          </div>

      </div>

<!------------------------------- MAIN CONTENT -------------------------------------------------->

      <div class="content">
        
        <!------------------ BOOKS: BOOK REVIEWS ------------------>
        <div id="tab-bookreviews" class="tab-content starter">
          <main class="window-border">
            <h1 class="window-titlebar">
                book reviews
            </h1>
            <h2>tab 1 reviews</h2>
            <p>this is where all my reviews would go</p>
          </main>
        </div>

        <!------------------ BOOKS: FAVE BOOKS ------------------>
        <div id="tab-favebooks" class="tab-content hidden">
          <main...

CSS

/* Had to use because ele.style.display = 'none'; didn't seem to be working*/
.starter {
  display: grid;
}

.hidden {
  display: none;
}

/* Ignore below */

.grid {
    display: grid;
    grid-template-columns: 1.5fr 3fr 2fr;
    grid-template-areas:
    "left-sidebar content corner";
    
    grid-gap: 10x;
    justify-content: left;
}

.left-sidebar {
  grid-area: left-sidebar;
}

.content {
  grid-area: content;
}

.corner {
  grid-area: corner;
  padding-left: 10%;
}

.window-border {
  background-color: lightgray;

  padding: 1px;
}

.window-titlebar {
  position: relative;
  padding: 1px;
  padding-left: 6px;
  margin: 4px;
  background-color: rgb(39, 60, 190);
  
  color: white;
  font-size: 12px;

  height: 18px;
  width: auto;
}

JavaScript

const navTabs = document.querySelectorAll('.navTab-link');
const allNavTabs = document.querySelectorAll('.navTab-content');

navTabs.forEach(navTab => {
  navTab.addEventListener('click', function() {
    allNavTabs.forEach(ele => {
      ele.style.display = 'none';
    });
    const myNavEle = this.getAttribute('data-target');
    const activeNavTab = document.getElementById(myNavEle);
    activeNavTab.style.display = 'block';
  });
});

const tabs = document.querySelectorAll('.tab-link');
const allTabs = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    allTabs.forEach(ele => {
      ele.style.display = 'none';
    });
    const myEle = this.getAttribute('data-target');
    const activeTab = document.getElementById(myEle);
    activeTab.style.display = 'block';
  });
});