JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<nav><a href="#meineID">Test</a>
  <img src="http://webentwicklung.ulrichbangert.de/images/2015-02-28_Gegensteine_03.jpg">
</nav>
<main>
  <div id="upper-div">
  </div>
  <div id="meineID" class="rp-meineID">
    <div class="leftpruducts" >
      <div>
        <h2 >
          Der Honig - Elexir des Lebens
        </h2>
        <p>
          Jeder Honig ist auch das süße <b>Abbild einer Region</b> in der gesammelt wird. Die Vielfalt der Nektare der verschiedensten Pflanzen ergeben auch einen <b>Reichtum von bis zu 200 verschiedenen Inhaltstoffen,</b> wie Frucht- und Traubenzucker, Pollen, Mineralstoffe, Proteine, Enzyme, Aminosäuren, Vitamine, Farb- und Aromastoffe und machen deshalb Honig zu einem wahren <b>Lebenselixier</b>.
        </p>
      </div>
    </div>
  </div>
</main>

CSS

nav {
  position: relative;
}
nav img {
  position: absolute;
  top: 100%;
  z-index: -1;
}
div#upper-div {
  flex: 0 0 800px;
  background-color: lightblue;
  margin-top: 270px;
}
div#meineID {
  flex: 0 0 800px;
  background-color: lightgrey;
}
nav {
  background-color: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}
nav a {
  font-size: 40px;
}
main {
  overflow: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}