JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
	<head>	
		<meta charset="utf-8">
		<title>startseite</title>
		<link rel="stylesheet" href="style/stylesheet_startseite.css">
	</head>

<body>
	<header>
		<nav>
			<ul>
				<li class="home"><a href="#">Cosima</a></li>
				<li class="about"><a href="#">About</a></li>
				<li class="contact"><a href="#">Kontakt</a></li>
			</ul>
		</nav>
	</header>

<main>
	<div id="container">
		
		<div class="first">
			<a href="Detailseite.html">
				<img class="eins"
				src= "http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
				<h1><span class="titel">Titel</span></h1>
			</a>
		</div>

			<a href="we.html">
				<img class="zwei" 
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a href="we.html">
				<img class="drei"
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a href="we.html">
				<img class="vier"
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a href="we.html">
				<img class="fünf"
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a href="we.html">
				<img class="sechs"
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a href="we.html">
				<img class="sieben"
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a href="we.html">
				<img class="acht"
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a href="we.html">
				<img class="neun"
				src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
			</a>

			<a...

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

body {
	margin: 0;
	background-color: white;
}

main {
	display: block;
	min-height: 100%;
}

nav ul {
	display: block;  
	width: auto;
	text-align: right;
}

.home {
	float: left;
}

ul {
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
}

nav {
	margin-left: 0px;
	margin-right: 0px;
	display: block;
}

nav ul li {
	display: inline-block;
	font-size: 17px;
	padding-top: 20px;
	padding-bottom: 20px;
}

li a {
	color: black;
	font-family: PT Sans;
	font-size: 18px;
	text-decoration: none;
	padding: 12px;
	padding-bottom: 5px;
	padding-top: 10px;
}

li a:hover {
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #71F5EE;
}

li.home {
	padding-left: 40px;
}

li.contact {
	padding-right: 40px;
	padding-left: 15px;
}

#container img {
	float: left;
}

div#container {
	height: 100%;
	position: absolute;
}

h1 {
	position: absolute;
	width: 100%;
	text-align: center;
}

h1 span {
	font-family: PT-Sans;
	color: white;
	font-size: 25px;
	position: absolute;
	top: 100px;
	left: auto;
	right: auto;
	text-align: center;
}

p {
	color: pink;
	position: absolute;
}

@media screen and (max-width: 1900px) {
	#container img {
		width: 33.33%;
		float: left;
		text-align: center;
	}
}

@media screen and (max-width: 1100px) {
	#container img{
		width: 50%;
		float: left;
	}
}