JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header> 
		<a href="">
            <img src="http://image-upload.de/image/agOGVp/2065444a3f.png" alt="Haareszeiten" />
        </a>
		
		<aside>
			<p>1140 Wien, Breitenseerstra&szlig;e 28.</p>
			<p>Terminangabe: 0660 2611977</p>
		</aside>
    </header>
	
	<div class="cf"></div>
	
    <nav>
        <ul>
            <li><a href="./index.html">Startseite</a></li>
            <li><a href="./uberuns.html">&Uuml;ber uns</a></li>
            <li><a href="./Galerie.html">Salon</a></li>
            <li><a href="./kontakt.html">Kontakt</a></li>
        </ul>
    </nav>
    <main>
        <aside id="page_img">
            <img src="http://image-upload.de/image/Y66pOg/46e2d80fa1.png" alt="Salon" />
        </aside>
        <section>
            <article>
                <aside>
                    <img src="http://image-upload.de/image/GG1jHX/e945c8fa8d.png" alt="Öffnungszeiten" />
                </aside>
                 <h1>&Ouml;ffnungszeiten</h1>

                <p>Dienstag bis Samstag je nach Vereinbarung.<br/>Wir kommen gerne Fr&uuml;her oder bleiben L&auml;nger
                    </p>
            
                    </article>
            <article>
                <aside>
                    <img src="http://image-upload.de/image/Xui0Nc/cb3899390d.gif" alt="Maps" />
                </aside>
                 <h1>Kontaktinformationen</h1>

                <p>1140 Wien, <br/>Breitenseerstra&szlig;e 28</p>
            </article>
        </section>
    </main>
</body>

CSS

/* maybe nessesary http://nicolasgallagher.com/micro-clearfix-hack/ */
html {
    background-image: url(http://image-upload.de/image/detGjJ/283098a419.png);
}

body {
    /*background: white;*/
    font-family: sans-serif;
    width: 900px;
    margin: 5em auto 2em;
    font-size: 12px;
    border-style:solid;
    border-width:1px;
}

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

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

header {
}

header img {
    width: 500px;
    display: block; 
	float:left;
}

header aside{
	background-image: url(http://image-upload.de/image/YN0m3a/3b03c1cc22.png);
	width: 300px;
	height:88px;
	float:right;
	text-align: right;
	padding-right:20px;
	font-size: 15px;
}

header aside p{
	margin:0;
}

header aside>:first-child {
    margin-top: 25px;
}

nav {
    background-color: #521D8F;
}

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

nav ul {
    padding: 5px;
    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;
    overflow:hidden;
}

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: 290px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom:10px;
    margin-top:10px;
    border-style:solid;
    border-width:1px;
}

section {
    margin-left: 30px;
    margin-right: 30px;
    overflow:hidden;
    padding-bottom:30px;
}

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

article {
    width:415px;
    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;
   ...