JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<header>EGGHEADS here</header>
<nav>Where
do
you
want
to
go
today?</nav>
<main>MAIN MAIN MAIN <button popovertarget="mainpop">Pop Out</button>
  <section id="mainpop" popover>
    <header><button popovertarget="mainpop" popovertargetaction="hide" class="close-btn">
      <span aria-hidden="true">X</span>
      <span class="sr-only">Schließen</span></button>
    </header>
    <table>
    <tr>
  <td>Ein</td>
  <td>Ring</td>
  <td>sie zu</td>
  <td>knechten</td>
  <td>sie</td>
  <td>alle</td>
  <td>zu</td>
  <td>finden</td>
</tr>
    <tr>
  <td>ins</td>
  <td>Dunkel</td>
  <td>zu</td>
  <td>treiben</td>
  <td>und</td>
  <td>ewig</td>
  <td>zu</td>
  <td>binden</td>
</tr>
    <tr>
  <td></td>
  <td>Im</td>
  <td>Lande</td>
  <td>Mordor</td>
  <td>wo</td>
  <td>die</td>
  <td>Schatten</td>
  <td>drohn</td>
</tr>
    </table>
  </section>
</main>
<aside>Side by side<br>We seek and hide</aside>
<footer>A footer a day keeps the apples away</footer>

CSS

body {
  height: calc(100vh - 16px);
  display: grid;
  grid: "head head head" 5em
       "nav main aside" 1fr
       "foot foot foot" 5em / 5em 1fr 1fr;
}
body > header { grid-area: head; background-color: yellow; text-align: center;}
nav { grid-area: nav; background-color: lime; white-space:pre; text-transform:uppercase;}
main {
  grid-area: main; color:white;background-color: #112;
  overflow-x: scroll;
}
#mainpop {
  padding: 0.2em 0.5em;
  color: #fcc;
  background-color: #006;
}
#mainpop header {
  text-align: right;
}
#mainpop p {
  white-space: pre;   /* simuliere den zu breiten Inhalt */
}
/* Folgen des Popover-Attributs für den nicht ausgepopten Zustand beseitigen */
#mainpop:not(:popover-open) {
  min-width:fit-content; height: 10em;
  overflow:visible;
  display: block; position: static;
  padding:0;
  border-width: 0;
}
/* Header mit Schließen Button nur zeigen wenn Popover aktiv ist */
#mainpop:not(:popover-open) header {
  display: none;
}
/* Wenn Popover aktiv ist, Höhe vergrößern. */
#mainpop:popover-open {
  max-width: 90vw;
  height: 80vh;
  overflow-x: scroll;
}
table td {
  min-width: 8em;
}
aside { grid-area: aside; color:white;background-color: #422;}
footer { grid-area: foot; background-color: #fc5; text-align:center;}