JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="hintergrund">

<div class="container"> 

<div id="wrapper">

	<!-- Header -->

<div id="header">
<header>
   <img src="logo.png" alt="Logo">
</header>
</div>
  
	<!-- Toplevel-Navigation -->
	  
      <div id="top_nav">
        <ul id="navigation_ul">
			<li id="navigation_li"><a href="Home.html">Home</a></li>
			<li id="navigation_li"><a class="active" href="Dokumente.html">Dokumente</a></li>
			<li id="navigation_li"><a href="Zuordnungstabellen.html">Zuordnungstabellen</a></li>
			<li id="navigation_li"><a href="#vorspann">1. Vorspann</a></li>
			<li id="navigation_li"><a href="#managementsystem">2. Managementsystem</a></li>
			<li id="navigation_li"><a href="#abläufe">3. Abl&aumlufe</a></li>
			<li id="navigation_li"><a href="#anhang">4. Anhang</a></li>
			<li id="navigation_li"><a href="#wiki">Wiki</a></li>
		</ul>
      </div>
	 

	<!-- Linke Spalte -->
	
	  
    <div id="left">
	  
	<!-- Home -->
	  <p></p>
	  
	  <div id="linkeueberschrift"> Home/Dokumente </div>
	  <p></p>
	  
	<!-- Linke Navigation -->
	<div id="Navigation_Links">
	
	  <ul id="nav">
	    <li class="expand"> <div class="ordner">  &nbsp;&nbsp;&nbsp;&nbsp; &#xbb; &Uumlber das IQB </div>
			<ul>
				<li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">&#xbb; Einbauerklaerung_2006-42-EG_Muster</a></li>
				<li><a href="PDF/a.pdf" class="embed-link"> &#xbb; Einbauerklaerung_2006-42-EG_Muster </a></li>
				<li>Partner/Links</li>
			</ul>
		</li>
		
		 <li class="expand"> <div class="ordner">  &nbsp;&nbsp;&nbsp;&nbsp; &#xbb; Bildungsstandards  </div>
			<ul>
				<li>Aufgabenbeispiele</li>
				<li>EMSE</li>
			     <li class="expand"> <div class="ordner">&nbsp;&nbsp;&nbsp;&nbsp; &#xbb; Downloadserver </div>
					<ul>
						<li>Audiofiles</li>
						<li>Videofiles</li>
					</ul>
				</li>
			</ul>
		</li>
		
		 <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; &#xbb; Arbeitsbereiche </div></li> 
			
		
	</ul>
	
	</div>
	
<!-- search...

CSS

.hintergrund {
	
	background: #ccc url(Hintergrund.jpg) repeat-y 50% 0;
	
}


/*Haupt-Container-----------------------------------*/

div.container {
    width: 100%;
	font: 12px Verdana,Arial;
    clear:both;
    /*border:1px solid silver;*/


}

/*Rahmen -----------------------------------*/

div#wrapper {
  width:auto;			
  height:auto;
  margin-left:12%;
  margin-right:12%;
  margin-top:1%;
  margin-bottom:1%;

 
  border:1px solid silver;

	
}

body {
	

}


/*Header-----------------------------------*/

header {
    padding: 1em;
    color: white;
    clear: left;
	background-image: url(Hintergrundbild.jpg);
	background-repeat:no-repeat;
    text-align: left;
}



/*Top-Level-Navigation-----------------------------------*/

div#top_nav {
  font: bold 10px Verdana,Arial;
  clear:both;
  background-color:white;
  text-align:right;
  color:#FFFFFF;  
  padding:5px;
  padding-left:0px;
  padding-right:0px;
  
}


div#top_nav a {
   text-decoration: none;
   color:white;
   }
   
   
 #navigation_ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

   #navigation_li {
    float: left;
	}

   #navigation_li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    #navigation_li a:hover {
    background-color: #111;
    }

    .active {
    background-color: #FCC330;
    }
	

/*NavigationLinks-----------------------------------*/

div#left {
   float:left;
   min-width:40%;
   max-width:40%;
   padding-top:5px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom:10px;
   margin-bottom:5px;
   background-color:#FF8700;			/*orange #FF8700;*/
   overflow:auto;
   box-sizing:border-box; /* Innenabstände werden nicht zur Breite addiert */
   /*outline: 1px solid gray;
   outline-offset:5px;*/
   border-right: 1px solid gray; 
   
   display:inline-block;
  /* background-image: linear-gradient(90deg, transparent,#FF8700...

JavaScript

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
	<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$("#nav").on('click', 'li.expand', function(e) {
			$(this).toggleClass("expanded");
			$(this).children("ul:first").slideToggle("300");
			e.stopPropagation();
		});	
		$("#nav").on('click', 'li.expanded a', function(e) {
			e.stopPropagation();
		});
	}); //$(document).ready
	</script>


<script src="js/pdfobject.min.js"></script>

<script>

var clickHandler = function (e){


	e.preventDefault();

	var pdfURL = this.getAttribute("href");

	var options = {
		pdfOpenParams: {
			navpanes: 0,
			toolbar: 0,
			statusbar: 0,
			view: "FitV"
		}
	};
	
	

var options = {
   width: "100%",
   height: "100%"
};
	var myPDF = PDFObject.embed(pdfURL, "#pdf", options);

	var el = document.querySelector("#results");
	el.setAttribute("class", (myPDF) ? "success" : "fail");
	

};

var a = document.querySelectorAll(".embed-link");

for(var i=0; i < a.length; i++){
	a[i].addEventListener("click", clickHandler);
}



</script>