JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="intro block">
	<div class="content">
		<p style="text-align: center;"><h2>Tipps zu eurer</h2><br><h1>Hochzeitsplanung</h1></p>
	</div>
</div>

<div class="beige">
	<div class="content">
		
			<div class="img-left">
				<img src="http://www.christianwagnerfilms.com/welcomeguide/img/gettingready.jpg">
			</div>
			<div class="text-right">
					<h1>Getting Ready</h1>
					<h2>Haltet das Zimmer sauber</h2>
					<h3>Es ist natürlich jede Menge los und einige Leute werden da sein, aber verstaut Rücksäcke, Taschen, Handtücker usw. in einem anderen Raum oder im Schrank.</h3>
					
					<h2>Fenster sind willkommen</h2>
					<h3>Fensterlicht ist das natürlichste und beste! Schaltet alle Lampen aus und orientiert euch am Fensterlicht wann immer es möglich ist.</h3>

					<h2>Das Zimmer</h2>
					<h3>Typische Zimmer sind nicht die besten für tolles Licht oder auch Dekoration. Ich empfehle euch entweder ein tolles Hotelzimmer zu mieten oder eine andere tolle Location, die zum Stil eurer Hochzeit passt zu suchen.</h3>

					<h2>Nicht den Bräutigam vergessen</h2>
					<h3>Oft zieht sich der Bräutigam im kleinen Kämmerchen um. Auch er sollte die gleichen tollen Voraussetzungen haben.</h3>

					<h2>Makeup</h2>
					<h3>Da ich natürliches Licht verwende, wird auch die Haut sehr realistisch dargestellt. Damit will ich sagen, dass weniger oft mehr ist. Zeigt euch so wie ihr selbst seid und lasst das MakeUp nicht zu dick auftragen.</h3>				
			</div>
		
	</div>
</div>


<div class="white">
	<div class="content wrap-reverse">
		
			<div class="text-left">
				
					<h1>First look</h1>
					<h2>Natürlichkeit</h2>
					<h3>Wenn ihr euch das erste Mal seht vor der Trauung, nennt man das einen First Look. Dieser muss jedoch nicht im Beisein von Eltern und Geschwister stattfinden, im Gegenteil.</h3>
					
					<h2>Nervosität</h2>
					<h3>Ein stiller Moment der Zweisamkeit ist das beste, um ruhiger zu werden. Die erste Nervosität ist weg und viele Paare können die...

CSS

body {
    margin: 0;
}
	
.intro {
	background-image: url("http://www.christianwagnerfilms.com/welcomeguide/img/intro.jpg");
	background-position: 50% 100%;
	background-size: cover;
	padding-top: 50px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	color: rgb(255, 255, 255);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.content {
    position: relative;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 20px;
	max-width: 1200px;
	display: flex;
	justify-content: center; /* spcae-between */
    display: -webkit-flex;
    display: -ms-flexbox;
    -ms-flex-pack: justify;
	align-items: center;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.wrap-reverse         { 
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}  

.block {
	padding: 75px 0;
	box-sizing: border-box;
	background-repeat: no-repeat;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
}

.beige {
	background-position: 0% 0%;
	background-size: auto auto;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-bottom: 0px;
	color: rgb(233, 233, 233);
	background-color: rgb(240, 237, 232);
}

.white {
	background-position: 0% 0%;
	background-size: auto auto;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-bottom: 0px;
	color: rgb(233, 233, 233);
}


.img-left {
    -ms-flex: 0 0 50%;
    flex-basis: 50%;
}	

img {
	width: auto;
	/*max-height: 100%;*/
	height: auto;
	max-width: 100%;
	min-width: 220px;
	width: 80%;
}

img-center {
	top: 50%;
	
}


.text-right {
    -ms-flex: 0 0 50%;
    flex-basis: 50%;
	min-width: 220px;	
}	

.text-left {
    -ms-flex: 0 0 50%;
    flex-basis: 50%;
	min-width: 220px;
}

.img-right {
    -ms-flex: 0 0 50%;
    flex-basis: 50%;
	display:flex;
	justify-content: right;
}		

h1 {
	font-family: 'Nothing you could do' ;
	font-size: 40px;
	color: #000;
	font-weight: normal;
	text-align: center;
}

h2 {
	font-family: Calibri;
	font-size: 22px;
	color:...