JSFiddle - React, Tailwind, and code Playground

HTML

<header id="kopf">
		<img id="headpicture" src="test.jpg" alt="test">
			<div id="ueberschrift">
				<p>Ein Schlüssel öffnet Tür und Tor - <br> Versuchen Sie Ihr Glück bei uns am Messestand! </p>
			</div>
	</header>

		<aside id="iframe">
			<iframe src="http://www.sprichwort-des-tages.de/zitat.htm"></iframe>
		</aside>
	
	<main>
	
			<section id="newsletterText">
				<article>
					<p>Sehr geehrte Damen und Herren<br><br>
					Vor einigen Tagen haben Sie von uns ein Mailing zum Thema "aktiver Kopierschutz" erhalten, in welchem ein Schlüssel mit eben diesem Kopierschutz sowie ein Ticket für einen kostenlosen Eintritt an die Messe in Wettingen zu finden war.<br><br>
				

					
					Wir laden Sie herzlich dazu ein, Ihr Glück bei uns am Stand 309 in der Halle 3 zu versuchen. Bringen Sie den Schlüssel mit und lassen Sie sich überraschen welche Türe damit geöffnet werden kann.<br><br>
					

					
					Gerne zeigen wir Ihnen unsere Lösungen für den sicheren Alltag. Ob mit Kopierschutz, mit Bohrschutz oder ganz nach Ihrem Wunsch helfen wir Ihnen die richtigen Schliessungen für Ihre Kunden zu finden.<br><br>
				

				
					Wir freuen uns, Sie in Wettingen in der Halle 3, am Stand 309 zu begrüssen. Die Messe findet vom 06. – 09. April 2017 statt. Sollten Sie in diesem Zeitraum verhindert sein, uns jedoch trotzdem gerne kennen lernen wollen, finden Sie uns auch an der "Bauen und modernisieren" in Zürich (07. – 10.09.2017) oder an der "Bauen und Wohnen" in Luzern (05. – 08.10.2017).<br><br>
				

					
					Natürlich dürfen Sie auch jederzeit einen Blick hinter unsere Kulissen werfen oder in einem persönlichen Beratungsgespräch mehr über uns erfahren. Kontaktieren Sie hierzu Herrn Roman Hesse via roman.hesse@sea.ch oder via Telefon unter 031 / 915 20 20. <br><br>
					


					Freundliche Grüsse <br> SEA Schliess-Systeme AG</p>
				</article>
				<div id="bild_herr_hesse">
					<figure>
						<img src="name.jpg" alt="rhes_schwarz">
						<figcaption>Roman Hesse<br>Leiter...

CSS

*{
			margin: 0px;
			padding: 0px;
		}

		

		header#kopf img#headpicture{
			width: 100%;
			height: 100px;
		}

		div#ueberschrift{
			background-color: #232c77;
			padding: 5%; 
			text-align: center;
		}

		div#ueberschrift p {
			color: white;
		}

		section#newsletterText{
			
			border-bottom: 1px solid gray; 
			padding: 2.5% 2.5%;

			width: 50%;
			margin: 0px auto;
		}

	

		div#bild_herr_hesse{
			margin-top: 6.5%;

		}

		div#bild_herr_hesse figure img{
			width: 20%;
		}

		section#fscSignet{
			padding: 0% 2.5% 2.5% 0%;
			border-bottom: 1px solid gray;
			width: 25%;
			float: left;

		}

		section#fscSignet img{
			float: left;

		}

		section#text{
			clear: left;
			padding: 1% 1%;
			width: 25%;
		}

		footer#foot{
			background-color: #232c77;
			width: 100%; 
			padding: 1% 0%;	
		}

		footer#foot p {
			color: white;
			font-size: 10px;
			padding-left: 1.5%;
		}

		footer#foot a#hplink{
			color: white;
			text-decoration: none;
		}

		iframe{
			/*width: 100%;*/
		}

		@media only screen and (max-width: 500px){
			@media only screen and (max-width: 500px){
              div#ueberschrift{
                background-color: #232c77;
                padding: 1.5%; 
                text-align: center;
        
        }
        
            section#newsletterText{
            
                border-bottom: 1px solid gray; 
                padding: 1% 1%;
                width: 75%;
                margin: 0px auto;
            }
      
      div#bild_herr_hesse{
            margin-top: 20%;
        }
    
    iframe{
      width: 75%;
    }
    
    section#text{
      padding: 0.5% 0.5%;
            width: 75%;
    }
     footer#foot{
            
            width: 100%; 
            padding: 0% 0%;    
        }


		}