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">
        <h3>Fruit</h3>
        <p>Fruit are delicious.</p>
      </div>
      
      <div class="vegetables">
        <h3>Vegetables</h3>
        <p>Vegetables are good for you.</p> 
      </div>
      
      <div class="dairy">
        <h3>Dairy</h3>
        <p>Dairy builds bones.</p>
      </div>
    
  </div>  
</div>

CSS

/* 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("div");

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

     for (i = 0; i < tabcontent.length; i++) {
       console.log(i + ": " + tabcontent[i].classList)

       if (tabcontent[i].classList.contains(group))
         tabcontent[i].style.display = "none";
       else
         tabcontent[i].style = "block";
     }


   }