JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Project-Website">
<meta name="keywords" content="HTML,CSS,Project,Website,Superhero,">
<meta name="author" content="">
<link rel="stylesheet" href="style.css">
<script>
function myFunction() {
    var x = document.getElementById("mymenue");
    if (x.className === "menue") {
        x.className += " responsive";
    } else {
        x.className = "menue";
    }
}
</script>


</head>

<body>

<img src="//https://www.html.de/attachments/logo2-png.4601/" srcset="//https://www.html.de/attachments/logo2-png.4601/ 700w, //https://www.html.de/attachments/logo1-png.4602/ 1750w" alt="SuperHero Page">


<div class="articlebg">


<div class="menue" id="mymenue">


  <a href="index.html">Home</a>
  <a id="secendBG" href="sides/tauchen.html">Tauchen</a>
  <a id="secendBG" href="sides/ocean.html">Ocean</a>
  <a id="secendBG" href="sides/aboutme.html">About me</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  
</div>

<div class="article">

<h1>Willkommen auf meiner Tauch-Seite</h1>

<p>
Auf meiner Seite werdet ihr mehr über mich und meine größte Leidenschaft das Tauchen erfahren.
</p>



<iframe class="yt1" src="placeholder" frameborder="0" allowfullscreen></iframe>

</div>

</div>
</body>

</html>
</div>

</div>
</body>

</html>

CSS

body
{
	background-image: url("//https://www.html.de/attachments/background-png.4603/");
	background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
	background-size: cover;
	max-height: 1300px;
    max-width: 1750px;
	margin: 0px auto;
}

.menue
{
  overflow: hidden;
  background-image: 
  url("//www.html.de/attachments/menubg1-png.4593/"), 
  url("//www.html.de/attachments/menubg3-png.4595/"), 
  url("//www.html.de/attachments/menubg2-png.4594");
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: top left, top right;
}

.menue a 
{
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-left: 15px;
}

.menue a:hover 
{
  color: #008eff;
}

.menue .icon 
{
  display: none;
}

@media screen and (max-width: 700px) 
{
  .menue a:not(:first-child) {display: none;}
  .menue a.icon 
  {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .menue.responsive {position: relative;}
  .menue.responsive .icon 
  {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menue.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #secendBG {
  background-image: 
  url("//www.html.de/attachments/menubg1-png.4593/"), 
  url("//www.html.de/attachments/menubg3-png.4595/"), 
  url("//www.html.de/attachments/menubg2-png.4594");
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: top left, top right;
  max-width: 150px;
  }
}
img, iframe
{
	max-width: 100%;
	max-height: auto;
}
.articlebg
{
	background-image: url("articlebg.png");
	max-height: 1300px;
}
.article
{
	padding: 20px;
}
h1
{
	text-align: center;
}
p
{
	font-size: 25px;
	text-align: center;
}
.yt1
{
	height: 330px;
	width: 610px;
	display: block;
    margin: auto;
}