rotates him

Basically I used the <details> and <summary> tags and position trickery.

• The tabs on top are 3 cells in a <table> row. There's a container <div> as a second row, 450px tall and spanning the 3 columns in order to keep the chost open. Each cell contains a <details> and <summary> tag.
• The <summary> tag is the name of the tab itself (ex: "How-to") with some styling. When clicked, the <detail> is two things:
  1. A copy of the tab (i.e. just "How-to" again) in a 'tab' <div>, the same size and styling of the summary, and
  2. 2. a new <div> of content, the same size and styling as the container <div>
  Both the 'tab' and 'content' <div>s have background colors to make sure that they cover the table cells behind them.
• The 'tab' and 'content' <div>s were moved to overlay their respective table cells with height and width and some fiddling/experimenting with distance in pixels and whatnot. The pointer-events:none; bit of code was added to make sure you could unclick/close a tab (i.e. <summary> element) through the <div> covering it.

This is the code on prechoster!

html

<table>
  <tr>
    <td>
        <details>
          <summary>Tab 1</summary>
          <div id="tab1">Tab 1</div>
          <div id="content1"></div>
      </details>
    </td>
    <td>
      <details>
        <summary>Tab 2</summary>
        <div id="tab2">Tab 2</div>
        <div id="content2"></div>
      </details>
    </td>
    <td>
      <details>
        <summary>Tab 3</summary>
        <div id="tab3">Tab 3</div>
        <div id="content3"></div>
      </details>
    </td>
  </tr>
  <tr>
    <td colspan = "3">
      <div id="content-container"></div>
    </td>
  </tr>
</table>

css

tr {
  border: 0px;
}
table,
#content-container {
font-size: 16px;
}
details {
height: 2.9em;
}
summary,
#content-container,
#content1,
#content2,
#content3,
#tab1,
#tab2,
#tab3 {
border: 1px black solid;
border-radius: 5px;
padding: .5em;
list-style: none;
background-color: white;
overflow: auto;
height: 2.9em;
}
p {
margin-top: 0;
}
#content-container,
#content1,
#content2,
#content3 {
height: 450px;
}
#content1,
#content2,
#content3 {
position: absolute;
left: 0.7em;
top: 6.6em;
width: calc(100% - 1.5em);
max-width: calc(673.833px);
}
#content1,
#tab1 {
background-color: lightblue;
}
#content2,
#tab2 {
background-color: white;
}
#content3,
#tab3 {
background-color: lightpink;
}
#tab1,
#tab2,
#tab3 {
position: relative;
pointer-events: none;
text-decoration: underline;
top: -2.9em;
font-weight: bold;
}