JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="nav">
    <div id="navTabs">
      <button id="nav1" class="active">Tab 1</button>
      <button id="nav2">Tab 2</button>
    </div>
    <div id="navRight">   
      <button id="navSearch">Search</button>
      <button id="navAbout">About</button>
    </div>      
  </div>
  <div id="content">
    <!-- Huom -->
    <div id="note" class="warning">
       <span>warning: </span> Tapahtui virhe!
    </div>
    <!-- Huom -->
    <div id="tab1" class="tabs active">
      <h1>Lorem ipsum</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat ultrices interdum. Sed commodo turpis ut feugiat suscipit. Vivamus dignissim sagittis quam non cursus. Pellentesque condimentum ligula nec eros dapibus rutrum. Maecenas at pretium ipsum. Integer tincidunt dui fermentum nibh rutrum congue. Phasellus ac metus vel est consequat egestas. Praesent vehicula nisl eu tincidunt pharetra. Suspendisse viverra, nisl auctor accumsan varius, nulla nisi dignissim orci, eget vestibulum mauris massa non risus. Mauris placerat, velit in luctus ultrices, nunc lacus congue justo, ac ultrices nulla nisl ac est. Duis eget augue at lorem mollis suscipit eget sit amet sapien. Sed bibendum diam ligula, sed vehicula metus tincidunt quis. 
      </p>
    </div>
    <div id="tab2" class="tabs">
    <h1>Aliquam ornare sollicitudin</h1>
    <p>
      nteger sed nulla ipsum. Nullam dignissim hendrerit mattis. Nam tincidunt mauris sed ultrices facilisis. Integer tempus leo vehicula tempor viverra. Nullam id imperdiet elit, at porta neque. Nullam tempus lectus suscipit dolor mollis, a dignissim metus fermentum. Duis sed purus molestie, facilisis lacus nec, rhoncus sem. Donec venenatis velit eget urna lobortis condimentum. Nam mi diam, tempus vel imperdiet non, pulvinar eu elit. Proin quis enim et leo ornare ultrices ut eget nibh. Vestibulum rhoncus, diam vel vehicula convallis, turpis ante convallis nulla, vitae maximus ligula ante ac sem. Orci...

CSS

body {
  background: #abd6ff;
  
  display: flex;
  justify-content: center;
}

#container {
  display: block;
  background: #fff;
  width: 450px;
  position: absolute;
  margin: 0 auto;

  border-radius: .75rem;
  box-shadow: 0 .0625rem 1.75rem 0 #00000026;
}

#nav {
  background-color:#f1f1f1;
  display: inline-flex;
  width: 100%;
  border-bottom: 2px solid #9e9e9e;
  padding: 0;
  margin: 0;
  
  border-radius: .75rem .75rem 0 0;
}

#navTabs, #navUser {
  padding: 0;
  margin: 0;
}

#navRight {
  float: right;
  margin-left: auto;
}

#nav button {
  color: #111;
  font-size: 16px;
  text-decoration: none;
  padding: 6px 12px;
  float: left;
  width: auto;
  border: none;
  display: block;
  outline: 0;
}

#navTabs button:first-of-type {
  border-top-left-radius: .75rem;
}

#navRight button:last-of-type {
  border-top-right-radius: .75rem;
}

button:hover {
  background: #ccc;
}

button.active {
  background: #9e9e9e;
}

#nav button.active:hover {
  background: #9e9e9e;
}

#content {
  margin: 0;
  padding: 0;
}

.tabs {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

.tabs h1 {
  font-size: 1.5rem;
  margin: 0;
}

#content .active {
  display: block;
}

#note {
  color: #555;
  width: 100%;
  margin: 0;
  position: absolute;

  font-family: Tahoma,Geneva,Arial,sans-serif;
  font-size: 11px;
  
  transition: 0.3s;
}

#note.scrolled-down {
  padding: 2px 6px;
  font-size: .8rem;
}

#note span {
    font-weight: bold;
    text-transform: uppercase;
}

.warning {
    background: #fff8c4;
    border: 3px solid #f2c779;
}

JavaScript

let activeTab = {
	nav: document.getElementById('nav1'),
	tab: document.getElementById('tab1')
}

const showElement = (navId) => {
	let tabId = navId.replace(/nav/, 'tab')
  let newActiveNav = document.getElementById(navId)
  let newActiveTab = document.getElementById(tabId)
  
  newActiveNav.classList.add('active')
  newActiveTab.classList.add('active')
  
  activeTab = {
  	nav: newActiveNav,
    tab: newActiveTab
  }
}

const hideElement = () => {
	activeTab.nav.classList.remove('active')
  activeTab.tab.classList.remove('active')
}

const click = (event) => {
  const targetTabId = event.target.id
  let clickedTab = document.getElementById(targetTabId)
  
  if (!clickedTab.classList.contains('active')) {
    hideElement()
    showElement(targetTabId)
  }
}

document.getElementById("nav1").addEventListener("click", click)
document.getElementById("nav2").addEventListener("click", click)
document.getElementById("navAbout").addEventListener("click", click)
document.getElementById("note").addEventListener('mouseover', (event) => {
	const note = document.getElementById("note")
	if (!note.classList.contains('scrolled-down')) {
    note.classList.add('scrolled-down')
  }
})
document.getElementById("note").addEventListener('mouseout', (event) => {
	const note = document.getElementById("note")
	if (note.classList.contains('scrolled-down')) {
    note.classList.remove('scrolled-down')
  }
})