JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header> <a href="">
            <img src="http://image-upload.de/image/5qMKpC/63b13d507b.png" alt="Haareszeiten" />
        </a>

    </header>
    <nav>
        <ul>
            <li><a href="">Startseite</a></li>
            <li><a href="">Über uns</a></li>
            <li><a href="">Salon</a></li>
            <li><a href="">Kontakt</a></li>
        </ul>
    </nav>
    <main>
        <aside id="page_img">
                                <img src="http://image-upload.de/image/f3iHmA/f73b173112.png" alt="Salon" />
        </aside>
        <section>
            <article>
                <aside>
                    <img src="http://image-upload.de/image/m8mybj/d9c45d7adf.png" alt="Öffnungszeiten" />
                </aside>
                 <h1>Öffnungszeiten</h1>

                <p>Dienstag bis Samstag je nach Vereinbarung</p>
            </article>
            <article>
                <aside>
                    <img src="http://cdn.destination360.com/north-america/us/california/san-francisco/the-westin-san-francisco-market-street-map.gif" alt="Maps" />
                </aside>
                 <h1>Kontaktinformationen</h1>

                <p>Union Square 28</p>
            </article>
        </section>
    </main>
</body>

CSS

html {
    /*background-image: url(http://image-upload.de/image/Y4Hmd1/72e6a0df69.png);*/
    /*background-image: url(http://image-upload.de/image/BOoRRJ/35d8739f72.png);*/
    background-image: url(http://image-upload.de/image/Ls194K/4103850e27.png);
}

body {
    /*background: white;*/
    font-family: sans-serif;
    width: 900px;
    margin: 4em auto 2em;
    font-size: 12px;
}

body>:first-child {
    padding:0;
    margin:0;
}

body>:last-child {
    margin-bottom: 0;
}

header {
    background: blue;
}

header img {
    width: 300px;
    background: red;
}

nav {
    background-color: #521D8F;
}

nav ul li {
    list-style: none;
    display: inline;
    margin: 2.5em;
    padding: 0;
}

nav ul {
    padding:0;
    margin:0;
}

a, a:link, a:active, a:visited {
    color: #FFFFFF;
    font-style: bold;
    text-decoration: none;
}

a:hover, a.active {
    text-decoration: underline;
}

main {
    background: #FFFFFF;
}

main>:first-child {
    margin-top: 0px;
}

main>:last-child {
    margin-bottom: 0;
}

#page_img {
    /*background-image: url(http://image-upload.de/image/f3iHmA/f73b173112.png);
    background-repeat:no-repeat;*/
    height: 280px;
    margin-left: 30px;
    margin-right: 30px;
    padding-bottom:10px;
    padding-top:10px;
}

section {
    margin-left: 30px;
    margin-right: 30px;
}

section>:first-child {
    margin-right: 30px;
}

article {
    width:405px;
    float: left;
    background: black;
    color: #ffffff;
    font: xsmall;
    height: 100%;
}

article h1 {
    color: #B28ED8;
}

article aside {
    width: 150px;
    height: 100px;
    text-align: center;
    margin: 15px;
    float:left;
}

article aside img {
    width: 150px;
    height: 100px;
}