JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<header>
<a class="skip-link" href="#bottom-menu">zum Menü</a>
<span class="titel">Demo</span>
</header>
<div class="container">
    <main>
    <nav class="top">
      <p>Navigation (Oben)</p>
      <ul>
        <li><a href="#">Navigation 1</a></li>
        <li><a href="#">Navigation 2</a></li>
        <li><a href="#">Navigation 3</a></li>
        <li><a href="#">Navigation 4</a></li>
        <li><a href="#">Navigation 5</a></li>
      </ul>
    </nav>
    <article>
      <h1>Haupttext</h1>

      <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
      Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in
      Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
      Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt
      sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in
      dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der
      allmächtigen Interpunktion werden die Blindtexte beherrscht – ein
      geradezu unorthographisches Leben. Eines Tages aber beschloß eine
      kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in
      die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort
      wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen
      Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte
      seine sieben Versalien, schob sich sein Initial in den Gürtel und
      machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges
      erklommen hatte, warf es einen letzten Blick zurück auf die Skyline
      seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und
      die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm
      eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort.
      Unterwegs traf es eine Copy.</p>
    </article>
    <aside>
      <h4>aside</h4>
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
  ...

CSS

body {
  max-width: 80em;
  margin: 0 auto;
}
header {
  text-align: center;
  background-color: #cfc;
  border-bottom: thin solid black;
}
header .titel {
  font-size: 3em;
}
header .titel::before {
  content: "Top-Down ";
}
nav.top {
  display: none;
}
.skip-link {
  position: absolute;
  top: 0; left: 0;
  font-size: 0.6em;
}
.skip-link:focus {
  font-size: 1em;
}
footer {
  margin-top: 1em;
  border-top: thin solid red;
}
@media (min-width: 50em) {
  header {
    background-color: #ffa;
  }
  header .titel::before {
    content: "Flex-Down ";
  }
  main {
    display: flex;
  }
  aside {
    flex: 0 0 12em;
  }
}
@media (min-width: 65em) {
  .skip-link {
    display: none;
  }
  header {
    background-color: #ccf;
  }
  header .titel::before {
    content: "Flex-Flex ";
  }
  nav.top {
    display: block;
    flex: 0 0 12em;
  }
  nav.bottom {
    display: none;
  }
}