JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="grid-container">

  <div class="tab_header tab">
    <button class="tab_buttons" onclick="toggle_tab('fruit')">Fruit</button>
    <button class="tab_buttons" onclick="toggle_tab('vegetables')">Vegetables</button>
    <button class="tab_buttons" onclick="toggle_tab('dairy')">Dairy</button>
  </div>

  <div class="navbar">
    <p>Navigation</p>
  </div>

  <div class="content">
    <div class="fruit hidden">
      <h3>Fruit</h3>
      <p>Fruit are delicious.</p>
    </div>

    <div class="vegetables hidden">
      <h3>Vegetables</h3>
      <p>Vegetables are good for you.</p>
    </div>

    <div class="dairy hidden">
      <h3>Dairy</h3>
      <p>Dairy builds bones.</p>
    </div>

  </div>
</div>

CSS

.hidden {
  display: none;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


.tab_header { grid-area: header; }
.navbar { 
    grid-area: menu; 
    }

.content { grid-area: main; }

.grid-container {
  display: grid;

    grid-template-columns: minmax(100px, auto) 1fr;
/*    grid-auto-rows: 10em;*/

  grid-template-areas:
	'header header'
    'menu main';
    
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 10px 0;
  font-size: 20px;
}

body {font-family: Arial;}

JavaScript

function toggle_tab(group) {
     var i, tabcontent, tab_buttons;

     tabcontent = document.querySelectorAll(".content > div");

     console.log("Group: " + group);

     for (i = 0; i < tabcontent.length; i++) {
	     var element = tabcontent[i];
       element.classList.toggle('hidden', !element.classList.contains(group));
     }
   }