JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="gif-container">
    <img src="http://www.dk-dimension.com/Images/Emblem.png" alt="" style="width: 300px;">
  </div>
  <div class="location">
    <h1>Home</h1>
  </div>
  <div>
    <p style="margin: 30px 0 30px 10px">Hier dein Menü</p>
  </div>
  <div class="boxen">
    <div>
      <h1>Notice</h1>
      <div>
        Text Text bla<br>
        Text bla
      </div>
    </div>  
    <div>
      <h1>Notice</h1>
      <div>
        Text Text bla<br>
        Text bla
      </div>
    </div>  
    <div>
      <h1>RSS-Feed</h1>
      <div>
        Hier dein Script für den Feed<br>
      </div>
    </div>
    <hr/>
  </div>
  <div>
    <p>Zur Startseite</p>
    <p>Send me an E-Mail</p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.main {
  width: 100%;
  height: 100%;
}

.gif-container {
  width: 100%;
  height: 100%;
  background: url("https://www.w3schools.com/css/trolltunga.jpg") repeat-x center center;
  background-repeat: no-repeat;
}

.location {
  background-color: white;
}

.location h1 {
  padding: 10px;
}

.boxen, .boxen ~ hr, .main > div:last-child > p {
  width: calc(100% - 20px);
  margin: 0 auto;
}

.boxen > div {
  margin-bottom: 80px;
}

.boxen h1 {
  margin-bottom: 20px;
}

.boxen h1 ~ div {
  border: 1px solid black;
  padding: 5px;
}

.main > div:last-child > p {
  line-height: 1.8em;
  font-style: italic;
  color: grey;
}

.main > div:last-child > p:first-child {
  margin-top: 10px;
}