JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Toy CSS</title>

</head>

<body>

<!-----------–-–-–-–--------TOP-MENU-------------------------->

<div id="topmenu">
  <ul>
    <li>
    <a href="#optiona">Option A</a>
  <ul>
  <li><a href="#a1">A1</a></li>
  <li><a href="#a2">A2</a></li>
  <li><a href="#a3">A3</a></li>
  <li><a href="#a4">A4</a></li>
  <li><a href="#a5">A5</a></li>
  </ul>
    </li>
    <li>
    <a href="#optionb">Option B</a>
  <ul>
  <li><a href="#b1">B1</a></li>
  <li><a href="#b2">B2</a></li>
  <li><a href="#b3">B3</a></li>
  <li><a href="#b4">B4</a></li>
  </ul>
    </li>
    <li>
    <a href="#optionc">Option C</a>
    </li>
  </ul>
</div>
   <div style="overflow:hidden;">
       <p>teste</p>
       <p>teste</p>
       <p>teste</p>
       <p>teste</p>
       <p>teste</p>
       <p>teste</p>
    </div>

<!-----------–-–-–-–---------OPTIONS-------------------------->

<div id="optiona" class="mainbox">
<h2>Option A</h2>
<p>You've selected Option A. Here is a list.</p>
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
</div>

<div class="sidemenu">
<ul>
<li><a href="#ai1">Item 1</a></li>
<li><a href="#ai2">Item 2</a></li>
<li><a href="#ai3">Item 3</a></li>
</ul>
</div>

<div id="ai1" class="mainbox">
<h2>Option A, Item 1</h2>
<p>You've selected Option A, Item 1!</p>
</div>
    
    

<div id="ai2" class="mainbox">
<h2>Option A, Item 2</h2>
<p>You've selected Option A, Item 2!</p>
</div>

<div id="optionb" class="mainbox">
<h2>Option B</h2>
<p>You've selected Option B. Here is a list.</p>
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
</div>

<div class="sidemenu">
<ul>
<li><a href="#bi1">Item 1</a></li>
<li><a href="#bi2">Item 2</a></li>
<li><a href="#bi3">Item 3</a></li>
</ul>
</div>

<div id="bi1" class="mainbox">
<h2>Option B, Item 1</h2>
<p>You've selected Option B, Item 1!</p>
</div>

<div id="optionc" class="mainbox">
<h2>Option C</h2>
<p>You've selected Option C. Here is a list.</p>
   ...

CSS

/* -------------------------MAIN-MENU----------------------- */
#topmenu {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;}
#topmenu ul {
  margin: 0;
  padding: 0;
  float: left;
  background-color: #036;
  width: 100%;}
#topmenu li {
  list-style: none;
  float: left; }
#topmenu li a {
  display: block;
  padding: 3px 8px;
  background-color: #036;
  color: #fff;
  font-size: 1.2em;
  border-right: 1px solid #fff;
  text-decoration: none; }


/* --------------SUBMENU-------------- */

#topmenu li ul {
  display: none; 
  width: 5em; /* Width to help Opera out */
  background-color: #69f;}
#topmenu li:hover ul {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0; }
#topmenu li:hover li {
  float: none; }
#topmenu li:hover li a {
  font-size: 1em;
  padding: 1px 10px;
  background-color: #69f;
  border-top: 1px solid #fff;
  color: #fff; }
#topmenu li li a:hover {
  background-color: #8db3ff; }

/* -------------------------SIDE-MENU----------------------- */

.sidemenu {
  margin: 0;
  padding: 0;
  margin-top: 10em;
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;}
.sidemenu ul {
  margin: 0;
  padding: 0;
  clear: left;
  float: left;}
.sidemenu li {
  clear: left;
  margin-bottom: 25px;
  list-style: none;}
.sidemenu li a {
  display: block;
  padding: 3px 8px;
  background-color: #000;
  color: #fff;
  font-size: 1.2em;
  border-right: 1px solid #fff;
  text-decoration: none; }

/* ----------------------------BOX-------------------------- */

.mainbox {
  clear: left;
  float: left;
  border: 2px solid black;
  margin: 10px 0px 0px 40px;
  min-height: 450px;
  padding: 50px;
  width: 600px; }
.mainbox ul li {
  width: 500px; }
.mainbox {
  display: none; }

JavaScript

$(function() {
    $('.sidemenu').hide();
    var selected;
    $('#topmenu li a').click(function(e) {
        e.preventDefault();
        if (selected) {
            selected.hide();
        }
        var tabContent = this.hash;
        var tab = $(tabContent).show();
        tab.siblings('.mainbox').hide();
        selected = tab.next().show();
    });
    $('.sidemenu a').click(function(e) {
        e.preventDefault();
        var tabContent = this.hash;
        var $tab = $(tabContent).show();
        $tab.siblings('.mainbox').hide();
    });
});