JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Startseite</title>
		<link rel="stylesheet" type="text/css" href="src/css/styles.css">
	</head>

	<body>

    <!-- === BANNER === -->

    <header id="header-banner"></header>

    <!-- === Navigationsleiste === -->

		<nav id="header-nav">
			<div class="container">
				<div class="row">
					<div class="col-6">

						<a id="header-nav-name"href="index.html">Test</a>

						<div id="navbar" class="clearfix">
							<ul>
								<li class="tier1"><a href="index.html">Home</a></li>
								<li class="tier1"><a href="index.html">Unser Verein</a></li>
								<div class="dropdown clearfix">
									<div class="dropdown-content">
												<ul>
													<li class="tier2"><a href="news.html">News</a></li>
													<li class="tier2"><a href="termine.html">Termine</a></li>
													<li class="tier2"><a href="jugend.html">Jugend</a></li>
													<li class="tier2"><a href="satzung.html">Satzung</a></li>
													<li class="tier2"><a href="aufnahmeantrag.html">Aufnahmeantrag</a></li>
													<li class="tier2"><a href="mitgliederliste.html">Mitgliederliste</a></li>
												</ul>

											</div>
										</div>

								<li class="tier1"><a href="index.html">Turniere</a></li>
								<li class="tier1"><a href="index.html">Mannschaften</a></li>
								<li class="tier1"><a href="index.html">Kontakt</a>
										<ul class="dropdown">
										 <li class="tier2"><a href="kontaktformular.html">Kontaktformular</a></li>
										 <li class="tier2"><a href="impressum.html">Impressum</a></li>
										 <li class="tier2"><a href="datenschutz.html">Datenschutzerklärung</a></li>
								 		</ul>
							 </li>

							</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>

		<!-- === News-Blog === -->



	</body>

</html>

CSS

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Raleway/raleway-v22-latin-regular.eot) format('embedded-opentype'), /* IE6-IE8 */
       url(../fonts/Raleway/raleway-v22-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */
       url(../fonts/Raleway/raleway-v22-latin-regular.woff) format('woff'), /* Modern Browsers */
       url(../fonts/Raleway/raleway-v22-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */
       url(../fonts/Raleway/raleway-v22-latin-regular.svg) format('svg'); /* Legacy iOS */
}

/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Raleway/raleway-v22-latin-700.eot) format('embedded-opentype'), /* IE6-IE8 */
       url(../fonts/Raleway/raleway-v22-latin-700.woff2) format('woff2'), /* Super Modern Browsers */
       url(../fonts/Raleway/raleway-v22-latin-700.woff) format('woff'), /* Modern Browsers */
       url(../fonts/Raleway/raleway-v22-latin-700.ttf) format('truetype'), /* Safari, Android, iOS */
       url(../fonts/Raleway/raleway-v22-latin-700.svg) format('svg'); /* Legacy iOS */
}
/* raleway-italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/Raleway/raleway-v22-latin-italic.eot) format('embedded-opentype'), /* IE6-IE8 */
       url(../fonts/Raleway/raleway-v22-latin-italic.woff2) format('woff2'), /* Super Modern Browsers */
       url(../fonts/Raleway/raleway-v22-latin-italic.woff) format('woff'), /* Modern Browsers */
       url(../fonts/Raleway/raleway-v22-latin-italic.ttf) format('truetype'), /* Safari, Android, iOS */
       url(../fonts/Raleway/raleway-v22-latin-italic.svg) format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Lato/lato-v20-latin-regular.eot)...