JSFiddle - React, Tailwind, and code Playground

HTML

<header id="kopfbereich">
  <h1>
     Testseite1
  </h1>
</header>
<nav id="nav">
   <ul>
         <li><a href="index.html">Starseite</a></li>
         <li><a href="ueberuns.html">Über Uns</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
     </ul>
</nav>
<main>
  <article class="bilder"> 
    <figure>
      <img src="https://www.haus-ohrbeck.de/fileadmin/_processed_/csm_Raum-der-Stille-01_9dc3ecf334.jpg" alt="raum">
      <figcaption>Das ist ein wunderschöner Raum</figcaption>
    </figure>
    
  </article>
  <article id="inhalt">
    <p>
    Text Text Text
    </p>
  </article>
</main>
<footer id="footer">
      <p>1 Satz Fußleiste </p>
</footer>

CSS

*{
  margin: 0;
  padding: 0;
}
#kopfbereich {
 background-color: red;
  }
  
 #kopfbereich h1 {
             color:white;
             font-size:2em;
             padding: 2%;
             }
 #nav   {
             background-color:#ceb98e;
             padding:2%;
            }
#nav ul {
         padding:0px;
         }
#nav li {
         background-color:orange;
         list-style-type: none;
         display: inline;
         height: 1.5em;
         padding: 0 1em;
         line-height: 1.5em;
         border-right: black 1px solid;
         } 

article.bilder{
  margin: 1% 1%;
}
.bilder figure img{
  width:350px;
  height:300px;
  
}

.bilder figure{
  border: 1px solid black;
  width: 350px;
  text-align: center;
}

#inhalt  {
 background-color:green;
   }
            
#footer {
 background-color: #ceb98e;
 }