JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<nav>
        <a href="#content1">Inhalte 1</a>
        <a href="#content2">Inhalte 2</a>
        <a href="#content3">Inhalte 3</a>
        <img src="http://webentwicklung.ulrichbangert.de/images/2015-02-28_Gegensteine_03.jpg">
    </nav>
    <main>
        <div id="content1">
            Inhalte 1
        </div>
        <div id="content2" 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>
        <div id="content3">
            Inhalte 3
        </div>
    </main>
    <footer>
        Der Fußtext
    </footer>

CSS

nav {
            position: relative;
            flex: 0 0 auto;
        }

        nav a {
            font-size: 20px;
        }


        nav img {
            position: absolute;
            top: 100%;
            z-index: -1;
        }

        div#content1 {
            flex: 0 0 800px;
            background-color: lightblue;
            margin-top: 270px;
        }

        div#content2 {
            flex: 0 0 800px;
            background-color: lightgrey;
        }

        div#content3 {
            flex: 0 0 800px;
            background-color: lightsalmon;
        }

        footer {
            font-size: 40px;
            flex: 0 0 auto;
        }


        main {
            overflow: auto;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
        }

        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            margin: 0;
        }