JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	
    <title> Intranet</title>
	
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="language" content="de" />
	
	 <!-- CSS -->
	
    <link rel="stylesheet" type="text/css" href="style.css" />
	<link href="css/bootstrap.min.css" rel="stylesheet">
	
	 <!-- Script -->
	 
	
	<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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	<!--Für Linke-Navigation -->
	
	<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>

</head>


	<!-- Body -->
<body>


<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 class="active" href="#home">Home</a></li>
			<li id="navigation_li"><a href="#Dokumente">Dokumente</a></li>
			<li id="navigation_li"><a href="#zuordnungstabellen">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...

CSS

/*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:6%;
 margin-right:6%;

 
  border:1px solid silver;
	
}


/*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:35%;
   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 */
   
  /* background-image: linear-gradient(90deg, transparent,#FF8700 45%, #FFFFFF 100%);*/
  
  
}

	
/*Überschrift Home-----------------------------------*/

	#home
	{
		
		font-size: 20px;
		vertical-align: bottom;
		border-bottom: 2px solid #F6F1F1;
		padding-bottom:6px;
		
	}
	
/*Linke Navigation...

JavaScript

<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>