JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<body>

<div class="container">

<header>
   <h1>Hilfe Überschrieft</h1>
</header>
  
<nav>
<h3>
Menü
</h3>
  <ul>
    <li><a href="https://www.html-seminar.de/">Home</a></li>
    <li><a href="https://www.html-seminar.de/forum/thread/6836-footer-unten-und-über-inhalt/#post45728">Mein Thema</a></li>
    <li><a href="#">leer5</a></li>
  </ul>
</nav>

<article>
  <h1>Lorem ipsum</h1>
 hier kann eine menge text rein.<br>
 <p1>Auch gross</p1><br>
 <p2>Mit eigenen Tag Namen "p2"</p2>
</article>

<footer>Footer Copyright &copy; Basti1012</footer>

</div>

</body>

CSS

body{

  height:1200px;

}


div.container {
    width: 100%;
    border: 1px solid gray;
}

header {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

p1{
  font-size:25px;
  color:blue;
}

p2{
  font-size:23px;
  color :green;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
    height:1000px;
}






footer{
  position:relative;
  left:0px;
  bottom:0px;
 
      padding: 1em;
    color: white;
    background-color: rgb( 0, 0,0);
opacity:0.6;
    text-align: center;
}