JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<header>
  <a href="./index.html">
    <img src="https://kontakt-vs.de/kontakt.png"
         alt="Banner Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen" />
  </a>
</header>
<nav>
  <ul>
  <li aria-current="page"><a href="#main">Startseite</a></li>
  <li><a href="./vorstellung.html">Über uns</a></li>
  <li><a href="./kinderarbeit.html">Arbeit mit Kindern</a></li>
  <li><a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a></li>
  <li><a href="./kontaktaufnahme.html">Kontakt</a></li>
  <li><a href="./impressum.html">Impressum</a></li>
  </ul>
</nav>
<main id="main">
  <h1>
  Herzlich willkommen auf der Startseite <br />des Sozialwerks
  <b>KONTAKT e.V.</b>, Villingen-Schwenningen!
  </h1>
  <p>
    Ziel des Vereins ist die soziale Arbeit für und mit Kindern,
    Jugendlichen und deren Familien (Deutsche, Deutschstämmige und
    Zugewanderte gleichermaßen), insbesondere durch die soziale Integration
    und die Förderung des gleichberechtigen Zusammenlebens dieser
    Personengruppen unter gegenseitiger Akzeptanz und Anerkennung der
    jeweils anderen Kulturen.
  </p>
  <p>
    Unsere Vision ist es, Menschen mit Migrationshintergrund bei der
    Integration in die Gesellschaft zu unterstützen. Darüber hinaus ist der
    Verein im Bereich der Bereitstellung präventiver Angebote für junge
    Menschen tätig.
  </p>
  <p>
    Seit 2010 ist KONTAKT e.V. anerkannter Träger der freien Jugendhilfe
    gemäß $75 SGB VIII.
  </p>
</main>

CSS

body {
  max-width: 60em;
  margin: auto;
}
header, nav, main {
  margin: 0.25em 0.5em;
}
header a {
  display: block;
}
header img {
   width: 100%;
   height: auto;
   vertical-align: bottom;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
   /*zentriert die Blöcke mit den Nav-Links nun auch bei horizontaler Betrachtung; zusammen mit @media screen ...*/
  justify-content: center;
}
nav li {
   background: linear-gradient(to bottom, hsl(280deg 2% 38%), hsl(280deg 2% 10%) 40% 60%, hsl(280deg 2% 38%));
   flex-grow: 1;
}
nav a {
  display: flex; align-items: center;
  width: 100%; 
  text-align: center;  /* für schmale Ansicht */
  justify-content: center;  /* für breite Ansicht */
  height: 3em;
  color: #f2f2f2;
  padding: 0px 16px; box-sizing: border-box;
  text-decoration: none;
  font-size: 1.1em;
  user-select: none;
}

nav a:where(:hover,:focus) {
   background-color: #18A096;
   color: black;
}

nav a:focus {
   position: relative;
   z-index: 1;
}

nav [aria-current] a {
  background: linear-gradient(to bottom, hsl(280deg 2% 38%), hsl(60deg 95% 20%) 40% 60%, hsl(280deg 2% 38%));
  color: white;
}

h1 {
   background-color: hsl(280 2% 28%);
   color: white;
   text-align: center;
   margin: 1em 0 0.5em 0;   /* Hier Abstand zwischen Nav und Inhalt einstellen */
   padding: 0.75em 1em;
   font-size: 1.4em;
}

/*KEINE Klasse (da ohne "." vor Bezeichnung -->für "Fließtext - alle Paragraphe (p) werden nun mit einem seitlichen Rahmen versehen*/
p {
   padding-left: 30px;
   padding-right: 30px;
   font-size: 1.2em;
}

/*KEINE Klasse (da ohne "." vor Bezeichnung -->für "Fließtext - alle Listenbereiche (ul) werden nun mit einem seitlichen Rahmen versehen*/
main ul {
   padding-left: 60px;
   padding-right: 30px;
   font-size: 1.2em;
}

/*bewirkt bei Verschmälerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)*/
@media screen and (max-width: 760px) {
  header, nav, main {
    margin: 0 0 0.25em 0;
  }
  nav ul {
   ...